@ndla/ui 50.8.0 → 50.8.2

package/src/Embed/RelatedContentEmbed.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import { RelatedContentMetaData } from '@ndla/types-embed';
-import { contentTypeMapping } from '../model/ContentType';
-import { RelatedArticle } from '../RelatedArticleList/RelatedArticleList';
+import { useTranslation } from "react-i18next";
+import { RelatedContentMetaData } from "@ndla/types-embed";
+import { contentTypeMapping } from "../model/ContentType";
+import { RelatedArticle } from "../RelatedArticleList/RelatedArticleList";
 
 interface Props {
   embed: RelatedContentMetaData;
@@ -20,7 +20,7 @@ interface Props {
 
 const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {
   const { t } = useTranslation();
-  if (embed.status === 'error') {
+  if (embed.status === "error") {
     return <></>;
   }
 
@@ -30,27 +30,27 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
     const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;
     const type = typeId ? contentTypeMapping[typeId] : undefined;
     const path =
-      data.resource?.paths.find((p) => p.split('/')[1] === subject?.replace('urn:', '')) ??
+      data.resource?.paths.find((p) => p.split("/")[1] === subject?.replace("urn:", "")) ??
       data.resource?.path ??
       `/article/${embedData.articleId}`;
     return (
       <RelatedArticle
-        title={data.article.title?.title ?? ''}
-        introduction={data.article.metaDescription?.metaDescription ?? ''}
-        target={isOembed ? '_blank' : undefined}
-        to={`${ndlaFrontendDomain ?? ''}${path ?? ''}`}
+        title={data.article.title?.title ?? ""}
+        introduction={data.article.metaDescription?.metaDescription ?? ""}
+        target={isOembed ? "_blank" : undefined}
+        to={`${ndlaFrontendDomain ?? ""}${path ?? ""}`}
         type={type}
       />
     );
-  } else if (typeof embedData.url === 'string') {
+  } else if (typeof embedData.url === "string") {
     return (
       <RelatedArticle
-        title={embedData.title ?? ''}
+        title={embedData.title ?? ""}
         introduction=""
         to={embedData.url}
         target="_blank"
-        type={'external-learning-resources'}
-        linkInfo={`${t('related.linkInfo')} ${
+        type={"external-learning-resources"}
+        linkInfo={`${t("related.linkInfo")} ${
           // Get domain name only from url
           embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url
         }`}

package/src/Embed/UnknownEmbed.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
-import { MetaData } from '@ndla/types-embed';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors } from "@ndla/core";
+import { MetaData } from "@ndla/types-embed";
 
 interface Props {
   embed: MetaData<any, any>;
@@ -21,7 +21,7 @@ const StyledSpan = styled.span`
 
 const UnknownEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
-  return <StyledSpan>{t('embed.unsupported', { type: embed.resource })}</StyledSpan>;
+  return <StyledSpan>{t("embed.unsupported", { type: embed.resource })}</StyledSpan>;
 };
 
 export default UnknownEmbed;

package/src/Embed/conceptComponents.tsx

@@ -6,25 +6,25 @@
  *
  */
 
-import { forwardRef, ReactNode, RefAttributes } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import { COPYRIGHTED } from '@ndla/licenses';
-import { ConceptData, ConceptVisualElementMeta } from '@ndla/types-embed';
-import { ExternalEmbed, HeartButtonType, IframeEmbed } from '.';
-import BrightcoveEmbed from './BrightcoveEmbed';
-import H5pEmbed from './H5pEmbed';
-import ImageEmbed from './ImageEmbed';
-import { Gloss } from '../Gloss';
-import { EmbedByline } from '../LicenseByline';
-import { Copyright } from '../types';
+import { forwardRef, ReactNode, RefAttributes } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
+import { COPYRIGHTED } from "@ndla/licenses";
+import { ConceptData, ConceptVisualElementMeta } from "@ndla/types-embed";
+import { ExternalEmbed, HeartButtonType, IframeEmbed } from ".";
+import BrightcoveEmbed from "./BrightcoveEmbed";
+import H5pEmbed from "./H5pEmbed";
+import ImageEmbed from "./ImageEmbed";
+import { Gloss } from "../Gloss";
+import { EmbedByline } from "../LicenseByline";
+import { Copyright } from "../types";
 
-export type ConceptType = 'concept' | 'gloss';
+export type ConceptType = "concept" | "gloss";
 
 export interface ConceptNotionData {
-  title: ConceptData['concept']['title'];
+  title: ConceptData["concept"]["title"];
   content?: ReactNode;
   metaImage?: {
     url?: string;
@@ -33,8 +33,8 @@ export interface ConceptNotionData {
   copyright?: Copyright;
   source?: string;
   visualElement?: ConceptVisualElementMeta;
-  conceptType: ConceptData['concept']['conceptType'];
-  glossData?: ConceptData['concept']['glossData'];
+  conceptType: ConceptData["concept"]["conceptType"];
+  glossData?: ConceptData["concept"]["glossData"];
   lang?: string;
 }
 
@@ -54,7 +54,7 @@ interface ConceptNotionProps extends RefAttributes<HTMLDivElement>, ConceptNotio
 
 const NotionDialogText = styled.div`
   font-weight: ${fonts.weight.normal};
-  ${fonts.sizes('18px', 1.3)};
+  ${fonts.sizes("18px", 1.3)};
   color: ${colors.text.primary};
   font-family: ${fonts.sans};
 `;
@@ -67,7 +67,7 @@ const NotionDialogContent = styled.div`
 
 const ContentSpacing = styled.div`
   padding: ${spacing.normal};
-  &[data-is-concept='false'] {
+  &[data-is-concept="false"] {
     margin-bottom: ${spacing.normal};
   }
 `;
@@ -115,18 +115,18 @@ const NotionHeader = styled.div`
     flex-grow: 1;
     margin: 0;
     font-weight: ${fonts.weight.bold};
-    ${fonts.sizes('22px', 1.2)};
+    ${fonts.sizes("22px", 1.2)};
   }
   small {
-    &[data-is-concept='true'] {
+    &[data-is-concept="true"] {
       border-left: 1px solid ${colors.brand.greyLight};
       padding-left: ${spacing.small};
       margin-left: ${spacing.xsmall};
     }
-    ${fonts.sizes('20px', 1.2)};
+    ${fonts.sizes("20px", 1.2)};
     font-weight: ${fonts.weight.normal};
   }
-  &[data-is-concept='false'] {
+  &[data-is-concept="false"] {
     margin-bottom: ${spacing.large};
   }
 `;
@@ -164,7 +164,7 @@ const StyledList = styled.ul`
     font-weight: ${fonts.weight.semibold};
     border-radius: ${misc.borderRadius};
     background-color: ${colors.brand.greyLightest};
-    ${fonts.sizes('12px', 1.2)};
+    ${fonts.sizes("12px", 1.2)};
     padding: ${spacing.xxsmall};
   }
 `;
@@ -195,7 +195,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
     ref,
   ) => {
     const { t } = useTranslation();
-    const isConcept = conceptType === 'concept';
+    const isConcept = conceptType === "concept";
     return (
       <div css={inPopover ? notionContentCss : undefined} {...rest} ref={ref}>
         <ContentSpacing data-is-concept={isConcept}>
@@ -212,22 +212,22 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
           {isConcept ? (
             <>
               <StyledNotionDialogContent>
-                {visualElement?.resource === 'image' ? (
+                {visualElement?.resource === "image" ? (
                   <ImageEmbed embed={visualElement} heartButton={heartButton} lang={lang} />
-                ) : visualElement?.resource === 'brightcove' ? (
+                ) : visualElement?.resource === "brightcove" ? (
                   <BrightcoveEmbed embed={visualElement} heartButton={heartButton} />
-                ) : visualElement?.resource === 'h5p' ? (
+                ) : visualElement?.resource === "h5p" ? (
                   <H5pEmbed embed={visualElement} />
-                ) : visualElement?.resource === 'iframe' ? (
+                ) : visualElement?.resource === "iframe" ? (
                   <IframeEmbed embed={visualElement} />
-                ) : visualElement?.resource === 'external' ? (
+                ) : visualElement?.resource === "external" ? (
                   <ExternalEmbed embed={visualElement} />
                 ) : null}
                 {content && <NotionDialogText lang={lang}>{content}</NotionDialogText>}
               </StyledNotionDialogContent>
               {tags && (
                 <ListWrapper>
-                  {`${t('notions.tags')}:`}
+                  {`${t("notions.tags")}:`}
                   <StyledList>
                     {tags.map((tag, index) => (
                       <li key={index}>{tag}</li>
@@ -237,7 +237,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
               )}
               {subjects && (
                 <ListWrapper>
-                  {`${t('notions.usedIn')}:`}
+                  {`${t("notions.usedIn")}:`}
                   <StyledList>
                     {subjects.map((subject, index) => (
                       <li key={index}>{subject}</li>
@@ -251,8 +251,11 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
               title={title}
               glossData={glossData!}
               audio={
-                visualElement?.status === 'success' && visualElement.resource === 'audio'
-                  ? { src: visualElement.data.audioFile.url, title: visualElement.data.title.title }
+                visualElement?.status === "success" && visualElement.resource === "audio"
+                  ? {
+                      src: visualElement.data.audioFile.url,
+                      title: visualElement.data.title.title,
+                    }
                   : undefined
               }
               exampleIds={exampleIds}

package/src/Embed/index.ts

@@ -6,18 +6,18 @@
  *
  */
 
-export { default as ImageEmbed } from './ImageEmbed';
-export { default as AudioEmbed } from './AudioEmbed';
-export { default as H5pEmbed } from './H5pEmbed';
-export { default as ExternalEmbed } from './ExternalEmbed';
-export { default as IframeEmbed } from './IframeEmbed';
-export { default as FootnoteEmbed } from './FootnoteEmbed';
-export { default as BrightcoveEmbed } from './BrightcoveEmbed';
-export { default as ContentLinkEmbed } from './ContentLinkEmbed';
-export { default as RelatedContentEmbed } from './RelatedContentEmbed';
-export { default as ConceptEmbed } from './ConceptEmbed';
-export { ConceptNotionV2 } from './conceptComponents';
-export { default as ConceptListEmbed } from './ConceptListEmbed';
-export { default as UnknownEmbed } from './UnknownEmbed';
-export { InlineConcept, BlockConcept } from './ConceptEmbed';
-export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from './types';
+export { default as ImageEmbed } from "./ImageEmbed";
+export { default as AudioEmbed } from "./AudioEmbed";
+export { default as H5pEmbed } from "./H5pEmbed";
+export { default as ExternalEmbed } from "./ExternalEmbed";
+export { default as IframeEmbed } from "./IframeEmbed";
+export { default as FootnoteEmbed } from "./FootnoteEmbed";
+export { default as BrightcoveEmbed } from "./BrightcoveEmbed";
+export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
+export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
+export { default as ConceptEmbed } from "./ConceptEmbed";
+export { ConceptNotionV2 } from "./conceptComponents";
+export { default as ConceptListEmbed } from "./ConceptListEmbed";
+export { default as UnknownEmbed } from "./UnknownEmbed";
+export { InlineConcept, BlockConcept } from "./ConceptEmbed";
+export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types";

package/src/Embed/types.ts

@@ -6,18 +6,20 @@
  *
  */
 
-import { ElementType } from 'react';
-import { IImageMetaInformationV3 } from '@ndla/types-backend/image-api';
-import { EmbedMetaData } from '@ndla/types-embed';
+import { ElementType } from "react";
+import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import { EmbedMetaData } from "@ndla/types-embed";
 
-export type HeartButtonType = ElementType<{ embed: Extract<EmbedMetaData, { status: 'success' }> }>;
+export type HeartButtonType = ElementType<{
+  embed: Extract<EmbedMetaData, { status: "success" }>;
+}>;
 
-export type EmbedParameter<T extends EmbedMetaData['resource']> = Partial<
-  Extract<EmbedMetaData, { status: 'success'; resource: T }>
+export type EmbedParameter<T extends EmbedMetaData["resource"]> = Partial<
+  Extract<EmbedMetaData, { status: "success"; resource: T }>
 >;
 
 export type CanonicalUrlFuncs = {
   image?: (image: IImageMetaInformationV3) => string;
 };
 
-export type RenderContext = 'article' | 'embed';
+export type RenderContext = "article" | "embed";

package/src/ErrorMessage/ErrorMessage.stories.tsx

@@ -6,19 +6,19 @@
  *
  */
 
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import ErrorMessage from './ErrorMessage';
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import ErrorMessage from "./ErrorMessage";
 //@ts-ignore
-import Oops from '../../../../images/oops.gif';
-import { defaultParameters } from '../../../../stories/defaults';
+import Oops from "../../../../images/oops.gif";
+import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Feilmeldingskomponenten lenker tilbake til forrige side eller til forsiden. Den brukes når det har oppstått en feil i systemet, f.eks. ved 404- eller 503-feil.
  */
 export default {
-  title: 'Patterns/ErrorMessage',
+  title: "Patterns/ErrorMessage",
   component: ErrorMessage,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
@@ -26,14 +26,14 @@ export default {
   args: {
     illustration: {
       url: Oops,
-      altText: 'Systemfeil',
+      altText: "Systemfeil",
     },
     messages: {
-      title: 'Oisann, her gikk noe galt',
-      description: 'En kort beskrivelse av feilen som oppsto.',
-      linksTitle: 'Kom igang:',
-      back: 'Gå tilbake',
-      goToFrontPage: 'Gå til forsiden',
+      title: "Oisann, her gikk noe galt",
+      description: "En kort beskrivelse av feilen som oppsto.",
+      linksTitle: "Kom igang:",
+      back: "Gå tilbake",
+      goToFrontPage: "Gå til forsiden",
     },
   },
 } as Meta<typeof ErrorMessage>;
@@ -42,18 +42,18 @@ export const ErrorMessageStory: StoryFn<typeof ErrorMessage> = (args) => {
   return <ErrorMessage {...args} />;
 };
 
-ErrorMessageStory.storyName = 'ErrorMessage';
+ErrorMessageStory.storyName = "ErrorMessage";
 
 export const LoginFailed: StoryObj<typeof ErrorMessage> = {
   args: {
     illustration: {
       url: Oops,
-      altText: 'Systemfeil',
+      altText: "Systemfeil",
     },
     messages: {
-      title: 'Ops, her gikk noe galt',
-      linksTitle: 'Prøv igjen',
-      logInFailed: 'Logg inn',
+      title: "Ops, her gikk noe galt",
+      linksTitle: "Prøv igjen",
+      logInFailed: "Logg inn",
     },
   },
 };

package/src/ErrorMessage/ErrorMessage.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { colors, spacing, breakpoints } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { colors, spacing, breakpoints } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
 
 const StyledErrorMessage = styled.article`
   text-align: center;
@@ -22,14 +22,14 @@ const StyledErrorMessage = styled.article`
   }
 `;
 
-const IllustrationWrapper = styled('div')`
+const IllustrationWrapper = styled("div")`
   margin-bottom: ${spacing.normal};
   @media (min-width: ${breakpoints.tablet}) {
     margin-top: ${spacing.large};
   }
 `;
 
-const Description = styled('p')`
+const Description = styled("p")`
   margin-bottom: ${spacing.normal};
   @media (min-width: ${breakpoints.tablet}) {
     margin-bottom: ${spacing.large};

package/src/ErrorMessage/ErrorResourceAccessDenied.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { spacing } from '@ndla/core';
-import { HumanMaleBoard, LogIn } from '@ndla/icons/common';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { spacing } from "@ndla/core";
+import { HumanMaleBoard, LogIn } from "@ndla/icons/common";
 
-import ErrorMessage from './ErrorMessage';
+import ErrorMessage from "./ErrorMessage";
 
 const StyledLogInIconWrapper = styled.span`
   margin-left: ${spacing.xsmall};
@@ -26,14 +26,14 @@ const ErrorResourceAccessDenied = ({ onAuthenticateClick }: Props) => {
   return (
     <ErrorMessage
       messages={{
-        title: t('user.resource.accessDenied'),
-        back: t('errorMessage.back'),
-        goToFrontPage: t('errorMessage.goToFrontPage'),
+        title: t("user.resource.accessDenied"),
+        back: t("errorMessage.back"),
+        goToFrontPage: t("errorMessage.goToFrontPage"),
       }}
       illustrationElement={<HumanMaleBoard size="large" />}
       customElement={
         <ButtonV2 size="medium" onClick={onAuthenticateClick}>
-          {t('user.buttonLogIn')}
+          {t("user.buttonLogIn")}
           <StyledLogInIconWrapper aria-hidden>
             <LogIn size="normal" />
           </StyledLogInIconWrapper>

package/src/ErrorMessage/index.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import ErrorMessage from './ErrorMessage';
+import ErrorMessage from "./ErrorMessage";
 
-export { default as ErrorResourceAccessDenied } from './ErrorResourceAccessDenied';
+export { default as ErrorResourceAccessDenied } from "./ErrorResourceAccessDenied";
 
 export default ErrorMessage;

package/src/ExpandableBox/ExpandableBox.stories.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { ExpandableBox, ExpandableBoxSummary } from './ExpandableBox';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
+import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * This is just a thin wrapper around the native HTML details element.
@@ -16,8 +16,8 @@ import { defaultParameters } from '../../../../stories/defaults';
  * The components will eventually add style and functionality to the native elements, as opposed to the components being styled by global css.
  */
 export default {
-  title: 'Components/ExpandableBox',
-  tags: ['autodocs'],
+  title: "Components/ExpandableBox",
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,

package/src/ExpandableBox/ExpandableBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes } from "react";
 
 interface Props extends HTMLAttributes<HTMLDetailsElement> {}
 

package/src/ExpandableBox/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { ExpandableBox, ExpandableBoxSummary } from './ExpandableBox';
+export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";

package/src/FactBox/FactBox.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { ComponentProps, ReactNode, forwardRef, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { IconButtonV2 } from '@ndla/button';
-import { breakpoints, colors, mq, spacing } from '@ndla/core';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-
-interface Props extends ComponentProps<'aside'> {
+import { ComponentProps, ReactNode, forwardRef, useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { IconButtonV2 } from "@ndla/button";
+import { breakpoints, colors, mq, spacing } from "@ndla/core";
+import { ChevronDown, ChevronUp } from "@ndla/icons/common";
+
+interface Props extends ComponentProps<"aside"> {
   children?: ReactNode;
   defaultOpen?: boolean;
   open?: boolean;
@@ -63,7 +63,7 @@ const StyledDiv = styled.div`
   overflow: hidden;
 
   &:after {
-    content: '';
+    content: "";
     text-align: center;
     position: absolute;
     top: 0;
@@ -141,7 +141,7 @@ const FactBox = forwardRef<HTMLElement, Props>(
     return (
       <StyledAside {...rest} css={[isOpen ? expandedStyle : undefined]} ref={ref}>
         <StyledDiv css={isOpen ? expandedContentStyle : undefined}>{children}</StyledDiv>
-        <StyledIconButton onClick={onClick} aria-label={t(`factbox.${isOpen ? 'close' : 'open'}`)}>
+        <StyledIconButton onClick={onClick} aria-label={t(`factbox.${isOpen ? "close" : "open"}`)}>
           {isOpen ? <ChevronUp /> : <ChevronDown />}
         </StyledIconButton>
       </StyledAside>

package/src/FactBox/Factbox.stories.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { Meta, StoryObj } from '@storybook/react';
-import { spacing } from '@ndla/core';
-import { Heading, Text } from '@ndla/typography';
-import FactBox from './FactBox';
-import { defaultParameters } from '../../../../stories/defaults';
+import styled from "@emotion/styled";
+import { Meta, StoryObj } from "@storybook/react";
+import { spacing } from "@ndla/core";
+import { Heading, Text } from "@ndla/typography";
+import FactBox from "./FactBox";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const Wrapper = styled.div`
   padding: ${spacing.normal};
@@ -21,9 +21,9 @@ const Wrapper = styled.div`
  *For alt nytt innhold på ndla.no skal ikke flytende høyrespalte benyttes. I stedet benytter vi faktabokser innenfor innholdsspalten.
  */
 export default {
-  title: 'Components/FactBox',
+  title: "Components/FactBox",
   component: FactBox,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   paramemeters: {
     inlineStories: true,
     ...defaultParameters,

package/src/FactBox/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-import FactBox from './FactBox';
+import FactBox from "./FactBox";
 
 export default FactBox;