@ndla/ui 56.0.176-alpha.0 → 56.0.178-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (145) hide show
  1. package/es/Article/Article.mjs +7 -0
  2. package/es/Article/Article.mjs.map +1 -1
  3. package/es/Breadcrumb/HomeBreadcrumb.mjs.map +1 -1
  4. package/es/CampaignBlock/CampaignBlock.mjs +7 -0
  5. package/es/CampaignBlock/CampaignBlock.mjs.map +1 -1
  6. package/es/CodeBlock/CodeBlock.mjs +7 -0
  7. package/es/CodeBlock/CodeBlock.mjs.map +1 -1
  8. package/es/Concept/Concept.mjs +7 -0
  9. package/es/Concept/Concept.mjs.map +1 -1
  10. package/es/ContactBlock/ContactBlock.mjs +7 -0
  11. package/es/ContactBlock/ContactBlock.mjs.map +1 -1
  12. package/es/Embed/AudioEmbed.mjs +7 -0
  13. package/es/Embed/AudioEmbed.mjs.map +1 -1
  14. package/es/Embed/BrightcoveEmbed.mjs +7 -0
  15. package/es/Embed/BrightcoveEmbed.mjs.map +1 -1
  16. package/es/Embed/CodeEmbed.mjs +7 -0
  17. package/es/Embed/CodeEmbed.mjs.map +1 -1
  18. package/es/Embed/ConceptEmbed.mjs +7 -0
  19. package/es/Embed/ConceptEmbed.mjs.map +1 -1
  20. package/es/Embed/ContentLinkEmbed.mjs +7 -0
  21. package/es/Embed/ContentLinkEmbed.mjs.map +1 -1
  22. package/es/Embed/CopyrightEmbed.mjs +7 -0
  23. package/es/Embed/CopyrightEmbed.mjs.map +1 -1
  24. package/es/Embed/EmbedWrapper.mjs +7 -0
  25. package/es/Embed/EmbedWrapper.mjs.map +1 -1
  26. package/es/Embed/ExternalEmbed.mjs +7 -0
  27. package/es/Embed/ExternalEmbed.mjs.map +1 -1
  28. package/es/Embed/FootnoteEmbed.mjs +7 -0
  29. package/es/Embed/FootnoteEmbed.mjs.map +1 -1
  30. package/es/Embed/GlossEmbed.mjs +7 -0
  31. package/es/Embed/GlossEmbed.mjs.map +1 -1
  32. package/es/Embed/H5pEmbed.mjs +7 -0
  33. package/es/Embed/H5pEmbed.mjs.map +1 -1
  34. package/es/Embed/IframeEmbed.mjs +7 -0
  35. package/es/Embed/IframeEmbed.mjs.map +1 -1
  36. package/es/Embed/ImageEmbed.mjs +7 -0
  37. package/es/Embed/ImageEmbed.mjs.map +1 -1
  38. package/es/Embed/UnknownEmbed.mjs +7 -0
  39. package/es/Embed/UnknownEmbed.mjs.map +1 -1
  40. package/es/Embed/UuDisclaimerEmbed.mjs +7 -0
  41. package/es/Embed/UuDisclaimerEmbed.mjs.map +1 -1
  42. package/es/Gloss/Gloss.mjs +7 -0
  43. package/es/Gloss/Gloss.mjs.map +1 -1
  44. package/es/Gloss/GlossExample.mjs +7 -0
  45. package/es/Gloss/GlossExample.mjs.map +1 -1
  46. package/es/Grid/Grid.mjs +7 -0
  47. package/es/Grid/Grid.mjs.map +1 -1
  48. package/es/LicenseByline/EmbedByline.mjs +7 -0
  49. package/es/LicenseByline/EmbedByline.mjs.map +1 -1
  50. package/es/LinkBlock/LinkBlock.mjs +7 -0
  51. package/es/LinkBlock/LinkBlock.mjs.map +1 -1
  52. package/lib/Article/Article.js +7 -0
  53. package/lib/Article/Article.js.map +1 -1
  54. package/lib/Breadcrumb/HomeBreadcrumb.js.map +1 -1
  55. package/lib/CampaignBlock/CampaignBlock.js +7 -0
  56. package/lib/CampaignBlock/CampaignBlock.js.map +1 -1
  57. package/lib/CodeBlock/CodeBlock.js +7 -0
  58. package/lib/CodeBlock/CodeBlock.js.map +1 -1
  59. package/lib/Concept/Concept.js +7 -0
  60. package/lib/Concept/Concept.js.map +1 -1
  61. package/lib/ContactBlock/ContactBlock.js +7 -0
  62. package/lib/ContactBlock/ContactBlock.js.map +1 -1
  63. package/lib/Embed/AudioEmbed.js +7 -0
  64. package/lib/Embed/AudioEmbed.js.map +1 -1
  65. package/lib/Embed/BrightcoveEmbed.js +7 -0
  66. package/lib/Embed/BrightcoveEmbed.js.map +1 -1
  67. package/lib/Embed/CodeEmbed.js +7 -0
  68. package/lib/Embed/CodeEmbed.js.map +1 -1
  69. package/lib/Embed/ConceptEmbed.d.ts +1 -1
  70. package/lib/Embed/ConceptEmbed.js +7 -0
  71. package/lib/Embed/ConceptEmbed.js.map +1 -1
  72. package/lib/Embed/ContentLinkEmbed.js +7 -0
  73. package/lib/Embed/ContentLinkEmbed.js.map +1 -1
  74. package/lib/Embed/CopyrightEmbed.js +7 -0
  75. package/lib/Embed/CopyrightEmbed.js.map +1 -1
  76. package/lib/Embed/EmbedWrapper.d.ts +1 -1
  77. package/lib/Embed/EmbedWrapper.js +7 -0
  78. package/lib/Embed/EmbedWrapper.js.map +1 -1
  79. package/lib/Embed/ExternalEmbed.js +7 -0
  80. package/lib/Embed/ExternalEmbed.js.map +1 -1
  81. package/lib/Embed/FootnoteEmbed.js +7 -0
  82. package/lib/Embed/FootnoteEmbed.js.map +1 -1
  83. package/lib/Embed/GlossEmbed.js +7 -0
  84. package/lib/Embed/GlossEmbed.js.map +1 -1
  85. package/lib/Embed/H5pEmbed.js +7 -0
  86. package/lib/Embed/H5pEmbed.js.map +1 -1
  87. package/lib/Embed/IframeEmbed.js +7 -0
  88. package/lib/Embed/IframeEmbed.js.map +1 -1
  89. package/lib/Embed/ImageEmbed.js +7 -0
  90. package/lib/Embed/ImageEmbed.js.map +1 -1
  91. package/lib/Embed/UnknownEmbed.js +7 -0
  92. package/lib/Embed/UnknownEmbed.js.map +1 -1
  93. package/lib/Embed/UuDisclaimerEmbed.js +7 -0
  94. package/lib/Embed/UuDisclaimerEmbed.js.map +1 -1
  95. package/lib/Gloss/Gloss.js +7 -0
  96. package/lib/Gloss/Gloss.js.map +1 -1
  97. package/lib/Gloss/GlossExample.js +7 -0
  98. package/lib/Gloss/GlossExample.js.map +1 -1
  99. package/lib/Grid/Grid.js +7 -0
  100. package/lib/Grid/Grid.js.map +1 -1
  101. package/lib/LicenseByline/EmbedByline.js +7 -0
  102. package/lib/LicenseByline/EmbedByline.js.map +1 -1
  103. package/lib/LinkBlock/LinkBlock.js +7 -0
  104. package/lib/LinkBlock/LinkBlock.js.map +1 -1
  105. package/package.json +8 -8
  106. package/src/Article/Article.tsx +1 -1
  107. package/src/Breadcrumb/HomeBreadcrumb.tsx +1 -1
  108. package/src/CampaignBlock/CampaignBlock.tsx +1 -1
  109. package/src/CodeBlock/CodeBlock.tsx +1 -1
  110. package/src/Concept/Concept.tsx +2 -2
  111. package/src/ContactBlock/ContactBlock.tsx +2 -2
  112. package/src/Embed/AudioEmbed.stories.tsx +1 -1
  113. package/src/Embed/AudioEmbed.tsx +2 -2
  114. package/src/Embed/BrightcoveEmbed.stories.tsx +1 -1
  115. package/src/Embed/BrightcoveEmbed.tsx +2 -2
  116. package/src/Embed/CodeEmbed.tsx +1 -1
  117. package/src/Embed/ConceptEmbed.stories.tsx +1 -1
  118. package/src/Embed/ConceptEmbed.tsx +2 -2
  119. package/src/Embed/ContentLinkEmbed.tsx +1 -1
  120. package/src/Embed/CopyrightEmbed.tsx +1 -1
  121. package/src/Embed/EmbedWrapper.tsx +1 -1
  122. package/src/Embed/ExternalEmbed.stories.tsx +1 -1
  123. package/src/Embed/ExternalEmbed.tsx +1 -1
  124. package/src/Embed/FootnoteEmbed.tsx +1 -1
  125. package/src/Embed/GlossEmbed.tsx +1 -1
  126. package/src/Embed/H5pEmbed.stories.tsx +1 -1
  127. package/src/Embed/H5pEmbed.tsx +1 -1
  128. package/src/Embed/IframeEmbed.stories.tsx +1 -1
  129. package/src/Embed/IframeEmbed.tsx +1 -1
  130. package/src/Embed/ImageEmbed.stories.tsx +2 -2
  131. package/src/Embed/ImageEmbed.tsx +2 -2
  132. package/src/Embed/RelatedContentEmbed.stories.tsx +1 -1
  133. package/src/Embed/UnknownEmbed.tsx +1 -1
  134. package/src/Embed/UuDisclaimerEmbed.stories.tsx +1 -1
  135. package/src/Embed/UuDisclaimerEmbed.tsx +1 -1
  136. package/src/FactBox/Factbox.stories.tsx +1 -1
  137. package/src/FileList/FileList.stories.tsx +1 -1
  138. package/src/Gloss/Gloss.tsx +2 -2
  139. package/src/Gloss/GlossExample.tsx +1 -1
  140. package/src/Grid/Grid.stories.tsx +1 -1
  141. package/src/Grid/Grid.tsx +1 -1
  142. package/src/LicenseByline/EmbedByline.tsx +4 -4
  143. package/src/LinkBlock/LinkBlock.tsx +1 -1
  144. package/src/Pitch/Pitch.stories.tsx +1 -1
  145. package/src/TagSelector/TagSelector.stories.tsx +1 -1
@@ -7,6 +7,13 @@ import { ark } from "@ark-ui/react";
7
7
  import { cx } from "@ndla/styled-system/css";
8
8
 
9
9
  //#region src/Article/Article.tsx
10
+ /**
11
+ * Copyright (c) 2016-present, NDLA.
12
+ *
13
+ * This source code is licensed under the GPLv3 license found in the
14
+ * LICENSE file in the root directory of this source tree.
15
+ *
16
+ */
10
17
  const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
11
18
  const ArticleContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledArticleContent, {
12
19
  className: cx("ndla-article", className),
@@ -1 +1 @@
1
- {"version":3,"file":"Article.mjs","names":[],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BadgesContainer } from \"./BadgesContainer\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n ({ className, ...props }, ref) => (\n <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n ),\n);\n\nconst StyledArticleWrapper = styled(\n ark.article,\n {\n base: {\n background: \"background.default\",\n display: \"flex\",\n flexDirection: \"column\",\n color: \"text.default\",\n alignItems: \"center\",\n width: \"100%\",\n overflowWrap: \"break-word\",\n position: \"relative\",\n \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n transform: \"scaleY(100) translateY(0.075em)\",\n },\n _after: {\n content: \"\",\n display: \"table\",\n clear: \"both\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n ark.hgroup,\n {\n base: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n \"& h1\": {\n overflowWrap: \"anywhere\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n ark.header,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n width: \"100%\",\n paddingBlockStart: \"xxlarge\",\n overflowWrap: \"anywhere\",\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n ark.footer,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n width: \"100%\",\n \"& > :is(:last-child)\": {\n paddingBlockEnd: \"5xlarge\",\n },\n },\n },\n { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"small\",\n width: \"100%\",\n minHeight: \"xxlarge\",\n },\n});\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n },\n});\n\ninterface ArticleTitleProps {\n badges?: ReactNode;\n heartButton?: ReactNode;\n competenceGoals?: ReactNode;\n id: string;\n lang?: string;\n title?: ReactNode;\n introduction?: ReactNode;\n disclaimer?: ReactNode;\n children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n badges,\n heartButton,\n title,\n lang,\n id,\n introduction,\n competenceGoals,\n disclaimer,\n children,\n}: ArticleTitleProps) => {\n return (\n <ArticleHeader>\n <ArticleHGroup>\n {(!!badges || !!heartButton) && (\n <InfoWrapper>\n {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n {heartButton}\n </InfoWrapper>\n )}\n <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n {title}\n </Heading>\n </ArticleHGroup>\n {!!introduction && (\n <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n <div>{introduction}</div>\n </Text>\n )}\n <StyledWrapper>\n {competenceGoals}\n {disclaimer}\n </StyledWrapper>\n {children}\n </ArticleHeader>\n );\n};\n"],"mappings":";;;;;;;;;AAgBA,MAAM,uBAAuB,OAAO,IAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,iBAAiB,YAC3B,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC;CAAqB,WAAW,GAAG,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,uBAAuB,OAC3B,IAAI,SACJ,EACE,MAAM;CACJ,YAAY;CACZ,SAAS;CACT,eAAe;CACf,OAAO;CACP,YAAY;CACZ,OAAO;CACP,cAAc;CACd,UAAU;CACV,sCAAsC,EACpC,WAAW,mCACZ;CACD,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,iBAAiB,YAAyE,OAAO,QAC5G,oBAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,YACf;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;CACf,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,WAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,YACA,eACuB;AACvB,QACE,qBAAC;EACC,qBAAC,6BACG,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,qBAAC,0BACE,CAAC,CAAC,UAAU,oBAAC,6BAAiB,SAAyB,EACvD,eACW,EAEhB,oBAAC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,oBAAC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,oBAAC,mBAAK,eAAmB;IACpB;EAET,qBAAC,4BACE,iBACA,cACa;EACf;KACa"}
1
+ {"version":3,"file":"Article.mjs","names":[],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BadgesContainer } from \"./BadgesContainer\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n ({ className, ...props }, ref) => (\n <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n ),\n);\n\nconst StyledArticleWrapper = styled(\n ark.article,\n {\n base: {\n background: \"background.default\",\n display: \"flex\",\n flexDirection: \"column\",\n color: \"text.default\",\n alignItems: \"center\",\n width: \"100%\",\n overflowWrap: \"break-word\",\n position: \"relative\",\n \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n transform: \"scaleY(100) translateY(0.075em)\",\n },\n _after: {\n content: \"\",\n display: \"table\",\n clear: \"both\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n ark.hgroup,\n {\n base: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n \"& h1\": {\n overflowWrap: \"anywhere\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n ark.header,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n width: \"100%\",\n paddingBlockStart: \"xxlarge\",\n overflowWrap: \"anywhere\",\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n ark.footer,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n width: \"100%\",\n \"& > :is(:last-child)\": {\n paddingBlockEnd: \"5xlarge\",\n },\n },\n },\n { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"small\",\n width: \"100%\",\n minHeight: \"xxlarge\",\n },\n});\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n },\n});\n\ninterface ArticleTitleProps {\n badges?: ReactNode;\n heartButton?: ReactNode;\n competenceGoals?: ReactNode;\n id: string;\n lang?: string;\n title?: ReactNode;\n introduction?: ReactNode;\n disclaimer?: ReactNode;\n children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n badges,\n heartButton,\n title,\n lang,\n id,\n introduction,\n competenceGoals,\n disclaimer,\n children,\n}: ArticleTitleProps) => {\n return (\n <ArticleHeader>\n <ArticleHGroup>\n {(!!badges || !!heartButton) && (\n <InfoWrapper>\n {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n {heartButton}\n </InfoWrapper>\n )}\n <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n {title}\n </Heading>\n </ArticleHGroup>\n {!!introduction && (\n <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n <div>{introduction}</div>\n </Text>\n )}\n <StyledWrapper>\n {competenceGoals}\n {disclaimer}\n </StyledWrapper>\n {children}\n </ArticleHeader>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,uBAAuB,OAAO,IAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,iBAAiB,YAC3B,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC;CAAqB,WAAW,GAAG,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,uBAAuB,OAC3B,IAAI,SACJ,EACE,MAAM;CACJ,YAAY;CACZ,SAAS;CACT,eAAe;CACf,OAAO;CACP,YAAY;CACZ,OAAO;CACP,cAAc;CACd,UAAU;CACV,sCAAsC,EACpC,WAAW,mCACZ;CACD,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,iBAAiB,YAAyE,OAAO,QAC5G,oBAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,YACf;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;CACf,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,WAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,YACA,eACuB;AACvB,QACE,qBAAC;EACC,qBAAC,6BACG,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,qBAAC,0BACE,CAAC,CAAC,UAAU,oBAAC,6BAAiB,SAAyB,EACvD,eACW,EAEhB,oBAAC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,oBAAC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,oBAAC,mBAAK,eAAmB;IACpB;EAET,qBAAC,4BACE,iBACA,cACa;EACf;KACa"}
@@ -1 +1 @@
1
- {"version":3,"file":"HomeBreadcrumb.mjs","names":[],"sources":["../../src/Breadcrumb/HomeBreadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowRightShortLine, HomeLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\nimport { Breadcrumb } from \"./Breadcrumb\";\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n color: \"inherit\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n _focusVisible: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst StyledArrowRight = styled(ArrowRightShortLine, {\n base: {\n tabletDown: {\n display: \"none\",\n },\n },\n});\n\nconst IconSafeLink = styled(SafeLink, {\n base: {\n color: \"inherit\",\n },\n});\n\ninterface Props {\n items: SimpleBreadcrumbItem[];\n}\n\nexport const HomeBreadcrumb = ({ items }: Props) => {\n const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {\n if (item.index === totalCount - 1) {\n return <span>{item.name}</span>;\n }\n if (item.index === 0 && typeof item.name === \"string\") {\n return (\n <IconSafeLink aria-label={item.name} to={item.to}>\n <HomeLine title={item.name} />\n </IconSafeLink>\n );\n }\n return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;\n };\n\n const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {\n if (item.index === totalCount - 1) {\n return null;\n }\n if (item.index === 0) {\n return <StyledArrowRight aria-hidden />;\n }\n return <ArrowRightShortLine aria-hidden />;\n };\n\n return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACD,eAAe,EACb,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,qBAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,QACV,EACF,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM,EACJ,OAAO,WACR,EACF,CAAC;AAMF,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;AACtE,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO,oBAAC,oBAAM,KAAK,OAAY;AAEjC,MAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,SAC3C,QACE,oBAAC;GAAa,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,oBAAC,YAAS,OAAO,KAAK,OAAQ;IACjB;AAGnB,SAAO,oBAAC;GAAe,IAAI,KAAK;aAAK,KAAK;IAAsB;;CAGlE,MAAM,mBAAmB,MAA6B,eAAuB;AAC3E,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO;AAET,MAAI,KAAK,UAAU,EACjB,QAAO,oBAAC,oBAAiB,sBAAc;AAEzC,SAAO,oBAAC,uBAAoB,sBAAc;;AAG5C,QAAO,oBAAC;EAAkB;EAAmB;EAA6B;GAAmB"}
1
+ {"version":3,"file":"HomeBreadcrumb.mjs","names":[],"sources":["../../src/Breadcrumb/HomeBreadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowRightShortLine, HomeLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { Breadcrumb } from \"./Breadcrumb\";\nimport type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n color: \"inherit\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n _focusVisible: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst StyledArrowRight = styled(ArrowRightShortLine, {\n base: {\n tabletDown: {\n display: \"none\",\n },\n },\n});\n\nconst IconSafeLink = styled(SafeLink, {\n base: {\n color: \"inherit\",\n },\n});\n\ninterface Props {\n items: SimpleBreadcrumbItem[];\n}\n\nexport const HomeBreadcrumb = ({ items }: Props) => {\n const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {\n if (item.index === totalCount - 1) {\n return <span>{item.name}</span>;\n }\n if (item.index === 0 && typeof item.name === \"string\") {\n return (\n <IconSafeLink aria-label={item.name} to={item.to}>\n <HomeLine title={item.name} />\n </IconSafeLink>\n );\n }\n return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;\n };\n\n const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {\n if (item.index === totalCount - 1) {\n return null;\n }\n if (item.index === 0) {\n return <StyledArrowRight aria-hidden />;\n }\n return <ArrowRightShortLine aria-hidden />;\n };\n\n return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACD,eAAe,EACb,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,qBAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,QACV,EACF,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM,EACJ,OAAO,WACR,EACF,CAAC;AAMF,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;AACtE,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO,oBAAC,oBAAM,KAAK,OAAY;AAEjC,MAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,SAC3C,QACE,oBAAC;GAAa,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,oBAAC,YAAS,OAAO,KAAK,OAAQ;IACjB;AAGnB,SAAO,oBAAC;GAAe,IAAI,KAAK;aAAK,KAAK;IAAsB;;CAGlE,MAAM,mBAAmB,MAA6B,eAAuB;AAC3E,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO;AAET,MAAI,KAAK,UAAU,EACjB,QAAO,oBAAC,oBAAiB,sBAAc;AAEzC,SAAO,oBAAC,uBAAoB,sBAAc;;AAG5C,QAAO,oBAAC;EAAkB;EAAmB;EAA6B;GAAmB"}
@@ -8,6 +8,13 @@ import { SafeLinkButton } from "@ndla/safelink";
8
8
  import { jsx, jsxs } from "react/jsx-runtime";
9
9
 
10
10
  //#region src/CampaignBlock/CampaignBlock.tsx
11
+ /**
12
+ * Copyright (c) 2023-present, NDLA.
13
+ *
14
+ * This source code is licensed under the GPLv3 license found in the
15
+ * LICENSE file in the root directory of this source tree.
16
+ *
17
+ */
11
18
  const Wrapper = styled("div", { base: {
12
19
  width: "100%",
13
20
  height: "100%",
@@ -1 +1 @@
1
- {"version":3,"file":"CampaignBlock.mjs","names":[],"sources":["../../src/CampaignBlock/CampaignBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n src: string;\n alt: string;\n}\n\ninterface Props {\n title: string;\n description: string;\n headingLevel?: HeadingLevel;\n url: {\n url?: string;\n text?: string;\n };\n image?: Image;\n imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n className?: string;\n path?: string;\n background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n base: {\n width: \"100%\",\n height: \"100%\",\n containerType: \"inline-size\",\n },\n});\n\nconst Container = styled(\"div\", {\n base: {\n display: \"grid\",\n gridTemplateColumns: \"1fr\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n backgroundColor: \"background.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"full\",\n overflow: \"hidden\",\n },\n variants: {\n imageSide: {\n left: {\n \"@/tablet\": {\n gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n },\n \"@supports not (container-type: inline-size)\": {\n tabletWide: {\n gridTemplateColumns: \"minmax(230px, 455px) auto\",\n },\n },\n },\n right: {\n \"@/tablet\": {\n gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n },\n \"@supports not (container-type: inline-size)\": {\n tabletWide: {\n gridTemplateColumns: \"auto minmax(230px, 455px)\",\n },\n },\n },\n },\n background: {\n neutral: {},\n brand1: {\n backgroundColor: \"surface.brand.1\",\n },\n brand3: {\n backgroundColor: \"surface.brand.3\",\n },\n },\n },\n defaultVariants: {\n imageSide: \"left\",\n background: \"neutral\",\n },\n});\n\nconst StyledImg = styled(\"img\", {\n base: {\n objectFit: \"cover\",\n width: \"100%\",\n height: \"215px\",\n \"@/tablet\": {\n height: \"340px\",\n },\n \"@supports not (container-type: inline-size)\": {\n tablet: {\n height: \"265px\",\n },\n tabletWide: {\n height: \"340px\",\n },\n },\n backgroundColor: \"background.default\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n paddingBlock: \"medium\",\n paddingInline: \"medium\",\n position: \"relative\",\n },\n});\n\nconst StyledText = styled(Text, {\n base: {\n tablet: {\n display: \"block\",\n overflow: \"hidden\",\n position: \"relative\",\n lineClamp: 4,\n boxOrient: \"vertical\",\n },\n },\n});\n\ninterface LinkButtonProps {\n url?: string;\n path?: string;\n children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n base: {\n boxShadow: \"full\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n if (url)\n return (\n <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n {children}\n </StyledSafeLinkButton>\n );\n return children;\n};\n\nexport const CampaignBlock = ({\n title,\n image,\n imageSide = \"left\",\n description,\n headingLevel: InternalHeading = \"h2\",\n url,\n path,\n className,\n background,\n}: Props) => {\n const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n return (\n <Wrapper>\n <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n {imageSide === \"left\" && imageComponent}\n <ContentWrapper>\n <Text asChild consumeCss textStyle=\"heading.small\">\n <InternalHeading>{parse(title)}</InternalHeading>\n </Text>\n <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n {!!url?.url && (\n <LinkButton url={url.url} path={path}>\n {parse(url.text ?? \"\")}\n <ArrowRightLine />\n </LinkButton>\n )}\n </ContentWrapper>\n {imageSide !== \"left\" && imageComponent}\n </Container>\n </Wrapper>\n );\n};\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,UAAU,OAAO,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;CAChB,EACF,CAAC;AAEF,MAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;EACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACF;EACD,YAAY;GACV,SAAS,EAAE;GACX,QAAQ,EACN,iBAAiB,mBAClB;GACD,QAAQ,EACN,iBAAiB,mBAClB;GACF;EACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,SACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,SACT;EACD,YAAY,EACV,QAAQ,SACT;EACF;CACD,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;CACX,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;AAQF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;CACd,EACF,CAAC;AAEF,MAAM,cAAc,EAAE,KAAK,UAAU,WAA4B;AAC/D,KAAI,IACF,QACE,oBAAC;EAAqB,IAAI,uBAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;;AAGT,MAAa,iBAAiB,EAC5B,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,iBACW;CACX,MAAM,iBAAiB,SAAS,oBAAC;EAAU,KAAK,GAAG,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,QACE,oBAAC,qBACC,qBAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;GACzB,qBAAC;IACC,oBAAC;KAAK;KAAQ;KAAW,WAAU;eACjC,oBAAC,6BAAiB,MAAM,MAAM,GAAmB;MAC5C;IACP,oBAAC;KAAW,WAAU;eAAe,MAAM,YAAY;MAAc;IACpE,CAAC,CAAC,KAAK,OACN,qBAAC;KAAW,KAAK,IAAI;KAAW;gBAC7B,MAAM,IAAI,QAAQ,GAAG,EACtB,oBAAC,mBAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ"}
1
+ {"version":3,"file":"CampaignBlock.mjs","names":[],"sources":["../../src/CampaignBlock/CampaignBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n src: string;\n alt: string;\n}\n\ninterface Props {\n title: string;\n description: string;\n headingLevel?: HeadingLevel;\n url: {\n url?: string;\n text?: string;\n };\n image?: Image;\n imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n className?: string;\n path?: string;\n background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n base: {\n width: \"100%\",\n height: \"100%\",\n containerType: \"inline-size\",\n },\n});\n\nconst Container = styled(\"div\", {\n base: {\n display: \"grid\",\n gridTemplateColumns: \"1fr\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n backgroundColor: \"background.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"full\",\n overflow: \"hidden\",\n },\n variants: {\n imageSide: {\n left: {\n \"@/tablet\": {\n gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n },\n \"@supports not (container-type: inline-size)\": {\n tabletWide: {\n gridTemplateColumns: \"minmax(230px, 455px) auto\",\n },\n },\n },\n right: {\n \"@/tablet\": {\n gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n },\n \"@supports not (container-type: inline-size)\": {\n tabletWide: {\n gridTemplateColumns: \"auto minmax(230px, 455px)\",\n },\n },\n },\n },\n background: {\n neutral: {},\n brand1: {\n backgroundColor: \"surface.brand.1\",\n },\n brand3: {\n backgroundColor: \"surface.brand.3\",\n },\n },\n },\n defaultVariants: {\n imageSide: \"left\",\n background: \"neutral\",\n },\n});\n\nconst StyledImg = styled(\"img\", {\n base: {\n objectFit: \"cover\",\n width: \"100%\",\n height: \"215px\",\n \"@/tablet\": {\n height: \"340px\",\n },\n \"@supports not (container-type: inline-size)\": {\n tablet: {\n height: \"265px\",\n },\n tabletWide: {\n height: \"340px\",\n },\n },\n backgroundColor: \"background.default\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n paddingBlock: \"medium\",\n paddingInline: \"medium\",\n position: \"relative\",\n },\n});\n\nconst StyledText = styled(Text, {\n base: {\n tablet: {\n display: \"block\",\n overflow: \"hidden\",\n position: \"relative\",\n lineClamp: 4,\n boxOrient: \"vertical\",\n },\n },\n});\n\ninterface LinkButtonProps {\n url?: string;\n path?: string;\n children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n base: {\n boxShadow: \"full\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n if (url)\n return (\n <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n {children}\n </StyledSafeLinkButton>\n );\n return children;\n};\n\nexport const CampaignBlock = ({\n title,\n image,\n imageSide = \"left\",\n description,\n headingLevel: InternalHeading = \"h2\",\n url,\n path,\n className,\n background,\n}: Props) => {\n const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n return (\n <Wrapper>\n <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n {imageSide === \"left\" && imageComponent}\n <ContentWrapper>\n <Text asChild consumeCss textStyle=\"heading.small\">\n <InternalHeading>{parse(title)}</InternalHeading>\n </Text>\n <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n {!!url?.url && (\n <LinkButton url={url.url} path={path}>\n {parse(url.text ?? \"\")}\n <ArrowRightLine />\n </LinkButton>\n )}\n </ContentWrapper>\n {imageSide !== \"left\" && imageComponent}\n </Container>\n </Wrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsCA,MAAM,UAAU,OAAO,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;CAChB,EACF,CAAC;AAEF,MAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;EACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACF;EACD,YAAY;GACV,SAAS,EAAE;GACX,QAAQ,EACN,iBAAiB,mBAClB;GACD,QAAQ,EACN,iBAAiB,mBAClB;GACF;EACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,SACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,SACT;EACD,YAAY,EACV,QAAQ,SACT;EACF;CACD,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;CACX,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;AAQF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;CACd,EACF,CAAC;AAEF,MAAM,cAAc,EAAE,KAAK,UAAU,WAA4B;AAC/D,KAAI,IACF,QACE,oBAAC;EAAqB,IAAI,uBAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;;AAGT,MAAa,iBAAiB,EAC5B,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,iBACW;CACX,MAAM,iBAAiB,SAAS,oBAAC;EAAU,KAAK,GAAG,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,QACE,oBAAC,qBACC,qBAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;GACzB,qBAAC;IACC,oBAAC;KAAK;KAAQ;KAAW,WAAU;eACjC,oBAAC,6BAAiB,MAAM,MAAM,GAAmB;MAC5C;IACP,oBAAC;KAAW,WAAU;eAAe,MAAM,YAAY;MAAc;IACpE,CAAC,CAAC,KAAK,OACN,qBAAC;KAAW,KAAK,IAAI;KAAW;gBAC7B,MAAM,IAAI,QAAQ,GAAG,EACtB,oBAAC,mBAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ"}
@@ -4,6 +4,13 @@ import { jsx } from "react/jsx-runtime";
4
4
  import { cx } from "@ndla/styled-system/css";
5
5
 
6
6
  //#region src/CodeBlock/CodeBlock.tsx
7
+ /**
8
+ * Copyright (c) 2020-present, NDLA.
9
+ *
10
+ * This source code is licensed under the GPLv3 license found in the
11
+ * LICENSE file in the root directory of this source tree.
12
+ *
13
+ */
7
14
  const Pre = styled("pre", {});
8
15
  const CodeBlock = forwardRef(({ highlightedCode, format, className, ...props }, ref) => {
9
16
  const codeWithLineNumbers = useMemo(() => {
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../src/CodeBlock/CodeBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n highlightedCode: string;\n format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n const codeWithLineNumbers = useMemo(() => {\n return highlightedCode\n .split(\"\\n\")\n .map((line, i) => {\n return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n })\n .join(\"\\n\");\n }, [highlightedCode]);\n\n return (\n <Pre\n className={cx(\"codeblock\", `language-${format}`, className)}\n {...props}\n dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n ref={ref}\n />\n );\n});\n"],"mappings":";;;;;;AAkBA,MAAM,MAAM,OAAO,OAAO,EAAE,CAAC;AAE7B,MAAa,YAAY,YAAmC,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,sBAAsB,cAAc;AACxC,SAAO,gBACJ,MAAM,KAAK,CACX,KAAK,MAAM,MAAM;AAChB,UAAO,4BAA4B,IAAI,EAAE,SAAS;IAClD,CACD,KAAK,KAAK;IACZ,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC;EACC,WAAW,GAAG,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;GACL;EAEJ"}
1
+ {"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../src/CodeBlock/CodeBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n highlightedCode: string;\n format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n const codeWithLineNumbers = useMemo(() => {\n return highlightedCode\n .split(\"\\n\")\n .map((line, i) => {\n return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n })\n .join(\"\\n\");\n }, [highlightedCode]);\n\n return (\n <Pre\n className={cx(\"codeblock\", `language-${format}`, className)}\n {...props}\n dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n ref={ref}\n />\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,MAAM,OAAO,OAAO,EAAE,CAAC;AAE7B,MAAa,YAAY,YAAmC,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,sBAAsB,cAAc;AACxC,SAAO,gBACJ,MAAM,KAAK,CACX,KAAK,MAAM,MAAM;AAChB,UAAO,4BAA4B,IAAI,EAAE,SAAS;IAClD,CACD,KAAK,KAAK;IACZ,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC;EACC,WAAW,GAAG,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;GACL;EAEJ"}
@@ -11,6 +11,13 @@ import { forwardRef } from "react";
11
11
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
12
12
 
13
13
  //#region src/Concept/Concept.tsx
14
+ /**
15
+ * Copyright (c) 2024-present, NDLA.
16
+ *
17
+ * This source code is licensed under the GPLv3 license found in the
18
+ * LICENSE file in the root directory of this source tree.
19
+ *
20
+ */
14
21
  const StyledFigure = styled(Figure, { base: {
15
22
  display: "flex",
16
23
  flexDirection: "column",
@@ -1 +1 @@
1
- {"version":3,"file":"Concept.mjs","names":[],"sources":["../../src/Concept/Concept.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BrightcoveEmbed } from \"../Embed/BrightcoveEmbed\";\nimport { ExternalEmbed } from \"../Embed/ExternalEmbed\";\nimport { H5pEmbed } from \"../Embed/H5pEmbed\";\nimport { IframeEmbed } from \"../Embed/IframeEmbed\";\nimport { ImageEmbed } from \"../Embed/ImageEmbed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends Omit<ComponentPropsWithRef<\"figure\">, \"title\"> {\n copyright?: ConceptCopyright;\n visualElement?: ConceptVisualElementMeta;\n lang?: string;\n title?: ReactNode;\n children?: ReactNode;\n source?: string;\n previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n textStyle: \"body.large\",\n display: \"inline\",\n \"& p\": {\n display: \"inline\",\n },\n },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n return (\n <StyledFigure ref={ref} {...rest} {...licenseProps}>\n <ContentWrapper lang={lang}>\n {!!title && (\n <>\n <b>{title}</b>\n {` – `}\n </>\n )}\n {children}\n </ContentWrapper>\n {visualElement?.resource === \"image\" ? (\n <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n ) : visualElement?.resource === \"brightcove\" ? (\n <BrightcoveEmbed embed={visualElement} />\n ) : visualElement?.resource === \"h5p\" ? (\n <H5pEmbed embed={visualElement} />\n ) : visualElement?.resource === \"iframe\" ? (\n <IframeEmbed embed={visualElement} />\n ) : visualElement?.resource === \"external\" ? (\n <ExternalEmbed embed={visualElement} />\n ) : null}\n {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n </StyledFigure>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAa,UAAU,YACpB,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAe,kBAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,QACE,qBAAC;EAAkB;EAAK,GAAI;EAAM,GAAI;;GACpC,qBAAC;IAAqB;eACnB,CAAC,CAAC,SACD,8CACE,oBAAC,iBAAG,QAAU,EACb,SACA,EAEJ;KACc;GAChB,eAAe,aAAa,UAC3B,oBAAC;IAAW,OAAO;IAAqB;IAAkB;KAAc,GACtE,eAAe,aAAa,eAC9B,oBAAC,mBAAgB,OAAO,gBAAiB,GACvC,eAAe,aAAa,QAC9B,oBAAC,YAAS,OAAO,gBAAiB,GAChC,eAAe,aAAa,WAC9B,oBAAC,eAAY,OAAO,gBAAiB,GACnC,eAAe,aAAa,aAC9B,oBAAC,iBAAc,OAAO,gBAAiB,GACrC;GACH,CAAC,CAAC,aAAa,oBAAC;IAAuB;IAAW,MAAK;KAAY;;GACvD;EAGpB"}
1
+ {"version":3,"file":"Concept.mjs","names":[],"sources":["../../src/Concept/Concept.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BrightcoveEmbed } from \"../Embed/BrightcoveEmbed\";\nimport { ExternalEmbed } from \"../Embed/ExternalEmbed\";\nimport { H5pEmbed } from \"../Embed/H5pEmbed\";\nimport { IframeEmbed } from \"../Embed/IframeEmbed\";\nimport { ImageEmbed } from \"../Embed/ImageEmbed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends Omit<ComponentPropsWithRef<\"figure\">, \"title\"> {\n copyright?: ConceptCopyright;\n visualElement?: ConceptVisualElementMeta;\n lang?: string;\n title?: ReactNode;\n children?: ReactNode;\n source?: string;\n previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n textStyle: \"body.large\",\n display: \"inline\",\n \"& p\": {\n display: \"inline\",\n },\n },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n return (\n <StyledFigure ref={ref} {...rest} {...licenseProps}>\n <ContentWrapper lang={lang}>\n {!!title && (\n <>\n <b>{title}</b>\n {` – `}\n </>\n )}\n {children}\n </ContentWrapper>\n {visualElement?.resource === \"image\" ? (\n <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n ) : visualElement?.resource === \"brightcove\" ? (\n <BrightcoveEmbed embed={visualElement} />\n ) : visualElement?.resource === \"h5p\" ? (\n <H5pEmbed embed={visualElement} />\n ) : visualElement?.resource === \"iframe\" ? (\n <IframeEmbed embed={visualElement} />\n ) : visualElement?.resource === \"external\" ? (\n <ExternalEmbed embed={visualElement} />\n ) : null}\n {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n </StyledFigure>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAa,UAAU,YACpB,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAe,kBAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,QACE,qBAAC;EAAkB;EAAK,GAAI;EAAM,GAAI;;GACpC,qBAAC;IAAqB;eACnB,CAAC,CAAC,SACD,8CACE,oBAAC,iBAAG,QAAU,EACb,SACA,EAEJ;KACc;GAChB,eAAe,aAAa,UAC3B,oBAAC;IAAW,OAAO;IAAqB;IAAkB;KAAc,GACtE,eAAe,aAAa,eAC9B,oBAAC,mBAAgB,OAAO,gBAAiB,GACvC,eAAe,aAAa,QAC9B,oBAAC,YAAS,OAAO,gBAAiB,GAChC,eAAe,aAAa,WAC9B,oBAAC,eAAY,OAAO,gBAAiB,GACnC,eAAe,aAAa,aAC9B,oBAAC,iBAAc,OAAO,gBAAiB,GACrC;GACH,CAAC,CAAC,aAAa,oBAAC;IAAuB;IAAW,MAAK;KAAY;;GACvD;EAGpB"}
@@ -5,6 +5,13 @@ import { useTranslation } from "react-i18next";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
6
 
7
7
  //#region src/ContactBlock/ContactBlock.tsx
8
+ /**
9
+ * Copyright (c) 2024-present, NDLA.
10
+ *
11
+ * This source code is licensed under the GPLv3 license found in the
12
+ * LICENSE file in the root directory of this source tree.
13
+ *
14
+ */
8
15
  const BackgroundVariant = {
9
16
  strong: { _before: { backgroundColor: "surface.brand.3" } },
10
17
  moderate: { _before: { backgroundColor: "surface.brand.3.moderate" } },
@@ -1 +1 @@
1
- {"version":3,"file":"ContactBlock.mjs","names":[],"sources":["../../src/ContactBlock/ContactBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n minWidth: \"surface.xxsmall\",\n padding: \"medium\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n boxShadow: \"full\",\n border: \"1px solid\",\n gap: \"medium\",\n position: \"relative\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n overflow: \"hidden\",\n background: \"surface.default\",\n flexDirection: \"column-reverse\",\n tablet: {\n alignItems: \"unset\",\n flexDirection: \"row\",\n },\n },\n});\n\nconst EmailLink = styled(\"a\", {\n base: {\n color: \"text.default\",\n textDecoration: \"underline\",\n _hover: { textDecoration: \"none\" },\n _focusVisible: { textDecoration: \"none\" },\n },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n base: {\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n zIndex: \"base\",\n _before: {\n content: '\"\"',\n position: \"absolute\",\n top: \"-60px\",\n left: \"-50px\",\n right: \"0\",\n bottom: \"0\",\n height: \"calc(100% + 50px)\",\n width: \"surface.3xlarge\",\n transform: \"rotate(-4deg)\",\n zIndex: \"hide\",\n },\n },\n variants: {\n variant: BackgroundVariant,\n imageExists: {\n true: {\n tabletDown: {\n _before: {\n display: \"none\",\n },\n },\n },\n },\n },\n});\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"flex-start\",\n justifyContent: \"flex-start\",\n flexDirection: \"column\",\n zIndex: \"base\",\n tabletDown: {\n _before: {\n content: '\"\"',\n position: \"absolute\",\n top: \"-50px\",\n left: \"-50px\",\n right: \"0\",\n bottom: \"0\",\n height: \"surface.xxsmall\",\n width: \"surface.3xlarge\",\n transform: \"rotate(-4deg)\",\n zIndex: \"hide\",\n },\n },\n },\n variants: {\n variant: BackgroundVariant,\n },\n});\n\nconst StyledImage = styled(\"img\", {\n base: {\n borderRadius: \"xsmall\",\n width: \"surface.xsmall\",\n height: \"surface.xsmall\",\n objectFit: \"cover\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n flex: \"1\",\n width: \"100%\",\n },\n});\n\nconst StyledDescription = styled(Text, {\n base: {\n fontFamily: \"serif\",\n },\n});\n\ninterface Props {\n image?: ImageMetaInformationV3DTO;\n jobTitle: string;\n description: string;\n backgroundColor?: ContactBlockBackground;\n imageWidth?: number;\n name: string;\n email: string;\n embedAlt?: string;\n lang?: string;\n}\n\nexport const ContactBlock = ({\n image,\n jobTitle,\n description,\n name,\n email,\n embedAlt,\n lang,\n backgroundColor = \"strong\",\n}: Props) => {\n const { t } = useTranslation();\n return (\n <StyledWrapper data-embed-type=\"contact-block\">\n <ContentWrapper>\n <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n {name}\n </Text>\n <Text lang={lang}>{jobTitle}</Text>\n <Text>\n {`${t(\"email\")}: `}\n <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n </Text>\n </HeaderWrapper>\n <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n </ContentWrapper>\n {!!image && (\n <ImageWrapper variant={backgroundColor}>\n <StyledImage\n alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n src={image.image.imageUrl}\n width={300}\n height={300}\n />\n <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n </ImageWrapper>\n )}\n </StyledWrapper>\n );\n};\n"],"mappings":";;;;;;;AAiBA,MAAM,oBAAuE;CAC3E,QAAQ,EAAE,SAAS,EAAE,iBAAiB,mBAAmB,EAAE;CAC3D,UAAU,EAAE,SAAS,EAAE,iBAAiB,4BAA4B,EAAE;CACtE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,0BAA0B,EAAE;CACnE;AAED,MAAa,0BAA0B,OAAO,KAAK,kBAAkB;AAErE,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,WAAW;CACX,QAAQ;CACR,KAAK;CACL,UAAU;CACV,aAAa;CACb,cAAc;CACd,UAAU;CACV,YAAY;CACZ,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAM,YAAY,OAAO,KAAK,EAC5B,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EAAE,gBAAgB,QAAQ;CAClC,eAAe,EAAE,gBAAgB,QAAQ;CAC1C,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQ;EACR,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT;EACF;CACD,UAAU;EACR,SAAS;EACT,aAAa,EACX,MAAM,EACJ,YAAY,EACV,SAAS,EACP,SAAS,QACV,EACF,EACF,EACF;EACF;CACF,CAAC;AAEF,MAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ,SAAS;EACT,KAAK;EACL,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,QAAQ;EACR,YAAY,EACV,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT,EACF;EACF;CACD,UAAU,EACR,SAAS,mBACV;CACF,CAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,MAAM;CACN,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM,EACJ,YAAY,SACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,OACA,UACA,aACA,MACA,OACA,UACA,MACA,kBAAkB,eACP;CACX,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC;EAAc,mBAAgB;aAC7B,qBAAC,6BACC,qBAAC;GAAc,SAAS;GAAiB,aAAa,CAAC,CAAC;;IACtD,oBAAC;KAAW;KAAM,YAAW;KAAO,WAAU;eAC3C;MACI;IACP,oBAAC;KAAW;eAAO;MAAgB;IACnC,qBAAC,mBACE,GAAG,EAAE,QAAQ,CAAC,KACf,oBAAC;KAAU,MAAM,UAAU;eAAU;MAAkB,IAClD;;IACO,EAChB,oBAAC;GAAkB,WAAU;aAAc;IAAgC,IAC5D,EAChB,CAAC,CAAC,SACD,qBAAC;GAAa,SAAS;cACrB,oBAAC;IACC,KAAK,aAAa,SAAY,WAAW,MAAM,QAAQ;IACvD,KAAK,MAAM,MAAM;IACjB,OAAO;IACP,QAAQ;KACR,EACF,oBAAC;IAAwB,MAAK;IAAQ,WAAW,MAAM;KAAa;IACvD;GAEH"}
1
+ {"version":3,"file":"ContactBlock.mjs","names":[],"sources":["../../src/ContactBlock/ContactBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useTranslation } from \"react-i18next\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n minWidth: \"surface.xxsmall\",\n padding: \"medium\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n boxShadow: \"full\",\n border: \"1px solid\",\n gap: \"medium\",\n position: \"relative\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n overflow: \"hidden\",\n background: \"surface.default\",\n flexDirection: \"column-reverse\",\n tablet: {\n alignItems: \"unset\",\n flexDirection: \"row\",\n },\n },\n});\n\nconst EmailLink = styled(\"a\", {\n base: {\n color: \"text.default\",\n textDecoration: \"underline\",\n _hover: { textDecoration: \"none\" },\n _focusVisible: { textDecoration: \"none\" },\n },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n base: {\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n zIndex: \"base\",\n _before: {\n content: '\"\"',\n position: \"absolute\",\n top: \"-60px\",\n left: \"-50px\",\n right: \"0\",\n bottom: \"0\",\n height: \"calc(100% + 50px)\",\n width: \"surface.3xlarge\",\n transform: \"rotate(-4deg)\",\n zIndex: \"hide\",\n },\n },\n variants: {\n variant: BackgroundVariant,\n imageExists: {\n true: {\n tabletDown: {\n _before: {\n display: \"none\",\n },\n },\n },\n },\n },\n});\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"flex-start\",\n justifyContent: \"flex-start\",\n flexDirection: \"column\",\n zIndex: \"base\",\n tabletDown: {\n _before: {\n content: '\"\"',\n position: \"absolute\",\n top: \"-50px\",\n left: \"-50px\",\n right: \"0\",\n bottom: \"0\",\n height: \"surface.xxsmall\",\n width: \"surface.3xlarge\",\n transform: \"rotate(-4deg)\",\n zIndex: \"hide\",\n },\n },\n },\n variants: {\n variant: BackgroundVariant,\n },\n});\n\nconst StyledImage = styled(\"img\", {\n base: {\n borderRadius: \"xsmall\",\n width: \"surface.xsmall\",\n height: \"surface.xsmall\",\n objectFit: \"cover\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n flex: \"1\",\n width: \"100%\",\n },\n});\n\nconst StyledDescription = styled(Text, {\n base: {\n fontFamily: \"serif\",\n },\n});\n\ninterface Props {\n image?: ImageMetaInformationV3DTO;\n jobTitle: string;\n description: string;\n backgroundColor?: ContactBlockBackground;\n imageWidth?: number;\n name: string;\n email: string;\n embedAlt?: string;\n lang?: string;\n}\n\nexport const ContactBlock = ({\n image,\n jobTitle,\n description,\n name,\n email,\n embedAlt,\n lang,\n backgroundColor = \"strong\",\n}: Props) => {\n const { t } = useTranslation();\n return (\n <StyledWrapper data-embed-type=\"contact-block\">\n <ContentWrapper>\n <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n {name}\n </Text>\n <Text lang={lang}>{jobTitle}</Text>\n <Text>\n {`${t(\"email\")}: `}\n <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n </Text>\n </HeaderWrapper>\n <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n </ContentWrapper>\n {!!image && (\n <ImageWrapper variant={backgroundColor}>\n <StyledImage\n alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n src={image.image.imageUrl}\n width={300}\n height={300}\n />\n <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n </ImageWrapper>\n )}\n </StyledWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,oBAAuE;CAC3E,QAAQ,EAAE,SAAS,EAAE,iBAAiB,mBAAmB,EAAE;CAC3D,UAAU,EAAE,SAAS,EAAE,iBAAiB,4BAA4B,EAAE;CACtE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,0BAA0B,EAAE;CACnE;AAED,MAAa,0BAA0B,OAAO,KAAK,kBAAkB;AAErE,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,WAAW;CACX,QAAQ;CACR,KAAK;CACL,UAAU;CACV,aAAa;CACb,cAAc;CACd,UAAU;CACV,YAAY;CACZ,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAM,YAAY,OAAO,KAAK,EAC5B,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EAAE,gBAAgB,QAAQ;CAClC,eAAe,EAAE,gBAAgB,QAAQ;CAC1C,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQ;EACR,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT;EACF;CACD,UAAU;EACR,SAAS;EACT,aAAa,EACX,MAAM,EACJ,YAAY,EACV,SAAS,EACP,SAAS,QACV,EACF,EACF,EACF;EACF;CACF,CAAC;AAEF,MAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ,SAAS;EACT,KAAK;EACL,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,QAAQ;EACR,YAAY,EACV,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT,EACF;EACF;CACD,UAAU,EACR,SAAS,mBACV;CACF,CAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,MAAM;CACN,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM,EACJ,YAAY,SACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,OACA,UACA,aACA,MACA,OACA,UACA,MACA,kBAAkB,eACP;CACX,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC;EAAc,mBAAgB;aAC7B,qBAAC,6BACC,qBAAC;GAAc,SAAS;GAAiB,aAAa,CAAC,CAAC;;IACtD,oBAAC;KAAW;KAAM,YAAW;KAAO,WAAU;eAC3C;MACI;IACP,oBAAC;KAAW;eAAO;MAAgB;IACnC,qBAAC,mBACE,GAAG,EAAE,QAAQ,CAAC,KACf,oBAAC;KAAU,MAAM,UAAU;eAAU;MAAkB,IAClD;;IACO,EAChB,oBAAC;GAAkB,WAAU;aAAc;IAAgC,IAC5D,EAChB,CAAC,CAAC,SACD,qBAAC;GAAa,SAAS;cACrB,oBAAC;IACC,KAAK,aAAa,SAAY,WAAW,MAAM,QAAQ;IACvD,KAAK,MAAM,MAAM;IACjB,OAAO;IACP,QAAQ;KACR,EACF,oBAAC;IAAwB,MAAK;IAAQ,WAAW,MAAM;KAAa;IACvD;GAEH"}
@@ -7,6 +7,13 @@ import { styled } from "@ndla/styled-system/jsx";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
 
9
9
  //#region src/Embed/AudioEmbed.tsx
10
+ /**
11
+ * Copyright (c) 2023-present, NDLA.
12
+ *
13
+ * This source code is licensed under the GPLv3 license found in the
14
+ * LICENSE file in the root directory of this source tree.
15
+ *
16
+ */
10
17
  const StyledFigure = styled(Figure, { base: { clear: "both" } });
11
18
  const AudioEmbed = ({ embed, lang }) => {
12
19
  const type = embed.embedData.type === "standard" ? "audio" : "podcast";
@@ -1 +1 @@
1
- {"version":3,"file":"AudioEmbed.mjs","names":[],"sources":["../../src/Embed/AudioEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { Author } from \"./ImageEmbed\";\nimport { AudioPlayer } from \"../AudioPlayer/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\ninterface Props {\n embed: AudioMetaData;\n lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n creators: Author[];\n rightsholders: Author[];\n processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nexport const AudioEmbed = ({ embed, lang }: Props) => {\n const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={type} />;\n }\n\n const { data, embedData } = embed;\n\n if (embedData.type === \"minimal\") {\n return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n }\n\n const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n const coverPhoto = data.podcastMeta?.coverPhoto;\n\n const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n return (\n <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n <AudioPlayer\n description={data.podcastMeta?.introduction ?? \"\"}\n img={img}\n src={data.audioFile.url}\n textVersion={\n data.manuscript?.manuscript.length ? (\n <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n ) : undefined\n }\n title={data.title.title}\n subtitle={subtitle}\n />\n <EmbedByline\n error={false}\n type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n copyright={embed.data.copyright}\n />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;AAiBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAaF,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAA4B,OAAQ;CAG9C,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,SAAS,UACrB,QAAO,oBAAC;EAAY;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;GAAS;CAGjF,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;EAAM,GAAG;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;EAAS;CAE1E,MAAM,eAAe,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;AAE3F,QACE,qBAAC;EAAmB;EAAM,mBAAiB;EAAM,GAAI;aACnD,oBAAC;GACC,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,oBAAC,SAAI,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,GAAI,GACtE;GAEN,OAAO,KAAK,MAAM;GACR;IACV,EACF,oBAAC;GACC,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;IACtB;GACW"}
1
+ {"version":3,"file":"AudioEmbed.mjs","names":[],"sources":["../../src/Embed/AudioEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport { AudioPlayer } from \"../AudioPlayer/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\ninterface Props {\n embed: AudioMetaData;\n lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n creators: Author[];\n rightsholders: Author[];\n processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nexport const AudioEmbed = ({ embed, lang }: Props) => {\n const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={type} />;\n }\n\n const { data, embedData } = embed;\n\n if (embedData.type === \"minimal\") {\n return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n }\n\n const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n const coverPhoto = data.podcastMeta?.coverPhoto;\n\n const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n return (\n <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n <AudioPlayer\n description={data.podcastMeta?.introduction ?? \"\"}\n img={img}\n src={data.audioFile.url}\n textVersion={\n data.manuscript?.manuscript.length ? (\n <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n ) : undefined\n }\n title={data.title.title}\n subtitle={subtitle}\n />\n <EmbedByline\n error={false}\n type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n copyright={embed.data.copyright}\n />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAaF,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAA4B,OAAQ;CAG9C,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,SAAS,UACrB,QAAO,oBAAC;EAAY;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;GAAS;CAGjF,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;EAAM,GAAG;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;EAAS;CAE1E,MAAM,eAAe,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;AAE3F,QACE,qBAAC;EAAmB;EAAM,mBAAiB;EAAM,GAAI;aACnD,oBAAC;GACC,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,oBAAC,SAAI,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,GAAI,GACtE;GAEN,OAAO,KAAK,MAAM;GACR;IACV,EACF,oBAAC;GACC,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;IACtB;GACW"}
@@ -9,6 +9,13 @@ import { useTranslation } from "react-i18next";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
10
10
 
11
11
  //#region src/Embed/BrightcoveEmbed.tsx
12
+ /**
13
+ * Copyright (c) 2023-present, NDLA.
14
+ *
15
+ * This source code is licensed under the GPLv3 license found in the
16
+ * LICENSE file in the root directory of this source tree.
17
+ *
18
+ */
12
19
  const LinkedVideoButton = styled(Button, { base: { marginBlockStart: "3xsmall" } });
13
20
  const BrightcoveIframe = styled("iframe", { base: {
14
21
  border: 0,
@@ -1 +1 @@
1
- {"version":3,"file":"BrightcoveEmbed.mjs","names":[],"sources":["../../src/Embed/BrightcoveEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport parse from \"html-react-parser\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: BrightcoveMetaData;\n renderContext?: RenderContext;\n lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n base: {\n marginBlockStart: \"3xsmall\",\n },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n base: {\n border: 0,\n height: \"auto\",\n width: \"100%\",\n },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n const urlOrTitle = title || url;\n return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" style=\"border: none;\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n const { account, videoid, player = \"default\" } = data;\n\n const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n return {\n src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n height: source?.height ?? \"480\",\n width: source?.width ?? \"640\",\n };\n};\nexport const BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n const { t } = useTranslation();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const { embedData } = embed;\n const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n } else if (embed.status === \"success\" && embed.data.description) {\n return parse(embed.data.description);\n }\n }, [embed, renderContext]);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (iframe) {\n const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width}/${height}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n if (embed.status === \"error\") {\n return (\n <EmbedErrorPlaceholder type=\"video\">\n <BrightcoveIframe\n ref={iframeRef}\n title={embedData.alt || fallbackTitle}\n aria-label={embedData.alt || fallbackTitle}\n {...getIframeProps(embedData, [])}\n allow=\"fullscreen; encrypted-media\"\n />\n </EmbedErrorPlaceholder>\n );\n }\n const { data } = embed;\n\n const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n const originalVideoProps = getIframeProps(embedData, data.sources);\n const alternativeVideoProps = linkedVideoId\n ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n : undefined;\n\n const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n return (\n <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n <div className=\"brightcove-video\">\n <BrightcoveIframe\n ref={iframeRef}\n className=\"original\"\n title={title}\n aria-label={title}\n {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n allow=\"fullscreen; encrypted-media\"\n />\n </div>\n <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n <div>\n {!!linkedVideoId && (\n <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n </LinkedVideoButton>\n )}\n </div>\n </EmbedByline>\n </Figure>\n );\n};\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,oBAAoB,OAAO,QAAQ,EACvC,MAAM,EACJ,kBAAkB,WACnB,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;CACR,EACF,CAAC;AASF,MAAa,aAAa,UAAe,CAAC,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,kBAAkB,MAA2B,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,cAAc;CAEjD,MAAM,SAAS,QAAQ,QAAQ,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,KAAK,kCAAkC,QAAQ,GAAG,OAAO,8BAA8B;EACvF,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;EACzB;;AAEH,MAAa,mBAAmB,EAAE,OAAO,gBAAgB,WAAW,WAAkB;CACpF,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,cAAc;CACtB,MAAM,gBAAgB,GAAG,EAAE,mBAAmB,CAAC,IAAI,UAAU;CAC7D,MAAM,oBAAoB,cAAc;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,UAAU,MAAM,MAAM,UAAU,QAAQ,GAAG;WACzD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,QAAO,MAAM,MAAM,KAAK,YAAY;IAErC,CAAC,OAAO,cAAc,CAAC;AAE1B,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,CAAC;AACzE,UAAO,MAAM,cAAc,GAAG,MAAM,GAAG;AACvC,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AACN,KAAI,MAAM,WAAW,QACnB,QACE,oBAAC;EAAsB,MAAK;YAC1B,oBAAC;GACC,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,EAAE,CAAC;GACjC,OAAM;IACN;GACoB;CAG5B,MAAM,EAAE,SAAS;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM,OAAO;CAErE,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;EAAe,EAAE,KAAK,QAAQ,GACtE;CAEJ,MAAM,eAAe,kBAAkB,MAAM,WAAW,QAAQ,SAAS,MAAM,UAAU,QAAQ;CAEjG,MAAM,QAAQ,KAAK,MAAM,MAAM,GAAG,GAAG,EAAE,mBAAmB,CAAC,IAAI,KAAK,SAAS;AAE7E,QACE,qBAAC;EAAO,mBAAgB;EAAa,GAAI;aACvC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,KAAK;IACL,WAAU;IACH;IACP,cAAY;IACZ,GAAK,yBAAyB,CAAC,oBAAoB,wBAAwB;IAC3E,OAAM;KACN;IACE,EACN,oBAAC;GAAY,MAAK;GAAQ,WAAW,KAAK;GAAY,aAAa;aACjE,oBAAC,mBACE,CAAC,CAAC,iBACD,oBAAC;IAAkB,MAAK;IAAQ,SAAQ;IAAY,eAAe,sBAAsB,MAAM,CAAC,EAAE;cAC/F,EAAE,iBAAiB,CAAC,oBAAoB,aAAa,gBAAgB;KACpD,GAElB;IACM;GACP"}
1
+ {"version":3,"file":"BrightcoveEmbed.mjs","names":[],"sources":["../../src/Embed/BrightcoveEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\n\ninterface Props {\n embed: BrightcoveMetaData;\n renderContext?: RenderContext;\n lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n base: {\n marginBlockStart: \"3xsmall\",\n },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n base: {\n border: 0,\n height: \"auto\",\n width: \"100%\",\n },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n const urlOrTitle = title || url;\n return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" style=\"border: none;\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n const { account, videoid, player = \"default\" } = data;\n\n const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n return {\n src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n height: source?.height ?? \"480\",\n width: source?.width ?? \"640\",\n };\n};\nexport const BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n const { t } = useTranslation();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const { embedData } = embed;\n const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n } else if (embed.status === \"success\" && embed.data.description) {\n return parse(embed.data.description);\n }\n }, [embed, renderContext]);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (iframe) {\n const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width}/${height}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n if (embed.status === \"error\") {\n return (\n <EmbedErrorPlaceholder type=\"video\">\n <BrightcoveIframe\n ref={iframeRef}\n title={embedData.alt || fallbackTitle}\n aria-label={embedData.alt || fallbackTitle}\n {...getIframeProps(embedData, [])}\n allow=\"fullscreen; encrypted-media\"\n />\n </EmbedErrorPlaceholder>\n );\n }\n const { data } = embed;\n\n const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n const originalVideoProps = getIframeProps(embedData, data.sources);\n const alternativeVideoProps = linkedVideoId\n ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n : undefined;\n\n const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n return (\n <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n <div className=\"brightcove-video\">\n <BrightcoveIframe\n ref={iframeRef}\n className=\"original\"\n title={title}\n aria-label={title}\n {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n allow=\"fullscreen; encrypted-media\"\n />\n </div>\n <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n <div>\n {!!linkedVideoId && (\n <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n </LinkedVideoButton>\n )}\n </div>\n </EmbedByline>\n </Figure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,MAAM,oBAAoB,OAAO,QAAQ,EACvC,MAAM,EACJ,kBAAkB,WACnB,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;CACR,EACF,CAAC;AASF,MAAa,aAAa,UAAe,CAAC,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,kBAAkB,MAA2B,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,cAAc;CAEjD,MAAM,SAAS,QAAQ,QAAQ,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,KAAK,kCAAkC,QAAQ,GAAG,OAAO,8BAA8B;EACvF,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;EACzB;;AAEH,MAAa,mBAAmB,EAAE,OAAO,gBAAgB,WAAW,WAAkB;CACpF,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,cAAc;CACtB,MAAM,gBAAgB,GAAG,EAAE,mBAAmB,CAAC,IAAI,UAAU;CAC7D,MAAM,oBAAoB,cAAc;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,UAAU,MAAM,MAAM,UAAU,QAAQ,GAAG;WACzD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,QAAO,MAAM,MAAM,KAAK,YAAY;IAErC,CAAC,OAAO,cAAc,CAAC;AAE1B,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,CAAC;AACzE,UAAO,MAAM,cAAc,GAAG,MAAM,GAAG;AACvC,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AACN,KAAI,MAAM,WAAW,QACnB,QACE,oBAAC;EAAsB,MAAK;YAC1B,oBAAC;GACC,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,EAAE,CAAC;GACjC,OAAM;IACN;GACoB;CAG5B,MAAM,EAAE,SAAS;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM,OAAO;CAErE,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;EAAe,EAAE,KAAK,QAAQ,GACtE;CAEJ,MAAM,eAAe,kBAAkB,MAAM,WAAW,QAAQ,SAAS,MAAM,UAAU,QAAQ;CAEjG,MAAM,QAAQ,KAAK,MAAM,MAAM,GAAG,GAAG,EAAE,mBAAmB,CAAC,IAAI,KAAK,SAAS;AAE7E,QACE,qBAAC;EAAO,mBAAgB;EAAa,GAAI;aACvC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,KAAK;IACL,WAAU;IACH;IACP,cAAY;IACZ,GAAK,yBAAyB,CAAC,oBAAoB,wBAAwB;IAC3E,OAAM;KACN;IACE,EACN,oBAAC;GAAY,MAAK;GAAQ,WAAW,KAAK;GAAY,aAAa;aACjE,oBAAC,mBACE,CAAC,CAAC,iBACD,oBAAC;IAAkB,MAAK;IAAQ,SAAQ;IAAY,eAAe,sBAAsB,MAAM,CAAC,EAAE;cAC/F,EAAE,iBAAiB,CAAC,oBAAoB,aAAa,gBAAgB;KACpD,GAElB;IACM;GACP"}
@@ -9,6 +9,13 @@ import { CheckLine, FileCopyLine } from "@ndla/icons";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
10
10
 
11
11
  //#region src/Embed/CodeEmbed.tsx
12
+ /**
13
+ * Copyright (c) 2023-present, NDLA.
14
+ *
15
+ * This source code is licensed under the GPLv3 license found in the
16
+ * LICENSE file in the root directory of this source tree.
17
+ *
18
+ */
12
19
  const StyledFigCaption = styled("figcaption", { base: {
13
20
  textStyle: "label.large",
14
21
  fontWeight: "bold"
@@ -1 +1 @@
1
- {"version":3,"file":"CodeEmbed.mjs","names":[],"sources":["../../src/Embed/CodeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, type ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n base: {\n textStyle: \"label.large\",\n fontWeight: \"bold\",\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n // We apply margin here to allow for the float and size props on figure to work as intended.\n \"& > *:not(:where(:first-child))\": {\n marginBlockStart: \"xsmall\",\n },\n },\n});\n\nconst getTitleFromFormat = (format: string) => {\n const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n if (selectedLanguage) {\n return selectedLanguage.title;\n }\n return;\n};\n\nexport const CodeEmbed = ({ embed }: Props) => {\n const [isCopied, setIsCopied] = useState(false);\n const { t } = useTranslation();\n\n useEffect(() => {\n if (isCopied) {\n const timer = setInterval(() => setIsCopied(false), 3000);\n // ensure interval is cleared - also if unmounted\n return () => {\n clearTimeout(timer);\n };\n }\n }, [isCopied]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"code\" />;\n }\n\n return (\n <StyledFigure data-embed-type=\"code-block\">\n <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n <CodeBlock\n highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n format={embed.embedData.codeFormat}\n />\n <Button\n variant=\"secondary\"\n onClick={async () => {\n if (embed.status === \"success\") {\n try {\n await navigator.clipboard.writeText(embed.data.decodedContent);\n setIsCopied(true);\n } catch {\n // do nothing\n }\n }\n }}\n >\n {isCopied ? <CheckLine /> : <FileCopyLine />}\n {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n </Button>\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,mBAAmB,OAAO,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,UACnB;CACF,EACF,CAAC;AAEF,MAAM,sBAAsB,WAAmB;CAC7C,MAAM,mBAAmB,oBAAoB,MAAM,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;;AAK5B,MAAa,aAAa,EAAE,YAAmB;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,MAAM,gBAAgB;AAE9B,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,kBAAkB,YAAY,MAAM,EAAE,IAAK;AAEzD,gBAAa;AACX,iBAAa,MAAM;;;IAGtB,CAAC,SAAS,CAAC;AAEd,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAAsB,MAAK,SAAS;AAG9C,QACE,qBAAC;EAAa,mBAAgB;;GAC5B,oBAAC,8BAAkB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,GAAoB;GAC9G,oBAAC;IACC,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;KACxB;GACF,qBAAC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,SAAI,MAAM,WAAW,UACnB,KAAI;AACF,YAAM,UAAU,UAAU,UAAU,MAAM,KAAK,eAAe;AAC9D,kBAAY,KAAK;aACX;;eAMX,WAAW,oBAAC,cAAY,GAAG,oBAAC,iBAAe,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB;KACxD;;GACI"}
1
+ {"version":3,"file":"CodeEmbed.mjs","names":[],"sources":["../../src/Embed/CodeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, type ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n base: {\n textStyle: \"label.large\",\n fontWeight: \"bold\",\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n // We apply margin here to allow for the float and size props on figure to work as intended.\n \"& > *:not(:where(:first-child))\": {\n marginBlockStart: \"xsmall\",\n },\n },\n});\n\nconst getTitleFromFormat = (format: string) => {\n const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n if (selectedLanguage) {\n return selectedLanguage.title;\n }\n return;\n};\n\nexport const CodeEmbed = ({ embed }: Props) => {\n const [isCopied, setIsCopied] = useState(false);\n const { t } = useTranslation();\n\n useEffect(() => {\n if (isCopied) {\n const timer = setInterval(() => setIsCopied(false), 3000);\n // ensure interval is cleared - also if unmounted\n return () => {\n clearTimeout(timer);\n };\n }\n }, [isCopied]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"code\" />;\n }\n\n return (\n <StyledFigure data-embed-type=\"code-block\">\n <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n <CodeBlock\n highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n format={embed.embedData.codeFormat}\n />\n <Button\n variant=\"secondary\"\n onClick={async () => {\n if (embed.status === \"success\") {\n try {\n await navigator.clipboard.writeText(embed.data.decodedContent);\n setIsCopied(true);\n } catch {\n // do nothing\n }\n }\n }}\n >\n {isCopied ? <CheckLine /> : <FileCopyLine />}\n {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n </Button>\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,MAAM,mBAAmB,OAAO,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,UACnB;CACF,EACF,CAAC;AAEF,MAAM,sBAAsB,WAAmB;CAC7C,MAAM,mBAAmB,oBAAoB,MAAM,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;;AAK5B,MAAa,aAAa,EAAE,YAAmB;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,MAAM,gBAAgB;AAE9B,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,kBAAkB,YAAY,MAAM,EAAE,IAAK;AAEzD,gBAAa;AACX,iBAAa,MAAM;;;IAGtB,CAAC,SAAS,CAAC;AAEd,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAAsB,MAAK,SAAS;AAG9C,QACE,qBAAC;EAAa,mBAAgB;;GAC5B,oBAAC,8BAAkB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,GAAoB;GAC9G,oBAAC;IACC,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;KACxB;GACF,qBAAC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,SAAI,MAAM,WAAW,UACnB,KAAI;AACF,YAAM,UAAU,UAAU,UAAU,MAAM,KAAK,eAAe;AAC9D,kBAAY,KAAK;aACX;;eAMX,WAAW,oBAAC,cAAY,GAAG,oBAAC,iBAAe,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB;KACxD;;GACI"}
@@ -10,6 +10,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
10
10
  import { Portal } from "@ark-ui/react";
11
11
 
12
12
  //#region src/Embed/ConceptEmbed.tsx
13
+ /**
14
+ * Copyright (c) 2024-present, NDLA.
15
+ *
16
+ * This source code is licensed under the GPLv3 license found in the
17
+ * LICENSE file in the root directory of this source tree.
18
+ *
19
+ */
13
20
  const StyledPopoverContent = styled(PopoverContent, { base: {
14
21
  width: "surface.xlarge",
15
22
  maxHeight: "50vh",
@@ -1 +1 @@
1
- {"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;AA+BA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,gBAAgB,cAAc;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,SAAO,MAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,cACX,MAAM,WAAW,YAAY,MAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,oBAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,oBAAC,yBAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,oBAAC;EAAkB;EAAQ;GAAsB;AAG1D,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,oBAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,oBAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,gBAAgB,YAC1B,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,aAAa,OAAuB,KAAK;AAC/C,QACE,qBAAC;EAAY,sBAAsB,WAAW;aAE5C,oBAAC;GAAe;GAAa;GAAK,GAAI;aACpC,oBAAC,wCAA4B,cAAyC;IACvD,EACjB,oBAAC,oBACC,oBAAC;GAAqB,KAAK;aACzB,oBAAC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,eAAe,YAA4C,OAAO,QAC7E,oBAAC;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
1
+ {"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,gBAAgB,cAAc;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,SAAO,MAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,cACX,MAAM,WAAW,YAAY,MAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,oBAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,oBAAC,yBAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,oBAAC;EAAkB;EAAQ;GAAsB;AAG1D,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,oBAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,oBAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,gBAAgB,YAC1B,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,aAAa,OAAuB,KAAK;AAC/C,QACE,qBAAC;EAAY,sBAAsB,WAAW;aAE5C,oBAAC;GAAe;GAAa;GAAK,GAAI;aACpC,oBAAC,wCAA4B,cAAyC;IACvD,EACjB,oBAAC,oBACC,oBAAC;GAAqB,KAAK;aACzB,oBAAC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,eAAe,YAA4C,OAAO,QAC7E,oBAAC;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
@@ -3,6 +3,13 @@ import { useTranslation } from "react-i18next";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/Embed/ContentLinkEmbed.tsx
6
+ /**
7
+ * Copyright (c) 2023-present, NDLA.
8
+ *
9
+ * This source code is licensed under the GPLv3 license found in the
10
+ * LICENSE file in the root directory of this source tree.
11
+ *
12
+ */
6
13
  const ContentLinkEmbed = ({ embed, isOembed, children }) => {
7
14
  const { t } = useTranslation();
8
15
  if (embed.status === "error") return /* @__PURE__ */ jsx(Text, {
@@ -1 +1 @@
1
- {"version":3,"file":"ContentLinkEmbed.mjs","names":[],"sources":["../../src/Embed/ContentLinkEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ContentLinkMetaData } from \"@ndla/types-embed\";\nimport type { ReactNode } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n embed: ContentLinkMetaData;\n isOembed?: boolean;\n children?: ReactNode;\n}\n\nexport const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return (\n <Text color=\"text.error\" asChild consumeCss>\n <span>\n <span>{`${t(\"embed.linkError\")}: `}</span>\n {children}\n </span>\n </Text>\n );\n }\n\n const { embedData, data } = embed;\n\n if (embedData.openIn === \"new-context\" || isOembed) {\n return (\n <a href={data.path} data-embed-type=\"content-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n {children}\n </a>\n );\n }\n\n return <a href={data.path}>{children}</a>;\n};\n"],"mappings":";;;;;AAmBA,MAAa,oBAAoB,EAAE,OAAO,UAAU,eAAsB;CACxE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,oBAAC;EAAK,OAAM;EAAa;EAAQ;YAC/B,qBAAC,qBACC,oBAAC,oBAAM,GAAG,EAAE,kBAAkB,CAAC,MAAW,EACzC,YACI;GACF;CAIX,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,WAAW,iBAAiB,SACxC,QACE,oBAAC;EAAE,MAAM,KAAK;EAAM,mBAAgB;EAAe,QAAO;EAAS,KAAI;EACpE;GACC;AAIR,QAAO,oBAAC;EAAE,MAAM,KAAK;EAAO;GAAa"}
1
+ {"version":3,"file":"ContentLinkEmbed.mjs","names":[],"sources":["../../src/Embed/ContentLinkEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport type { ContentLinkMetaData } from \"@ndla/types-embed\";\nimport type { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n embed: ContentLinkMetaData;\n isOembed?: boolean;\n children?: ReactNode;\n}\n\nexport const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return (\n <Text color=\"text.error\" asChild consumeCss>\n <span>\n <span>{`${t(\"embed.linkError\")}: `}</span>\n {children}\n </span>\n </Text>\n );\n }\n\n const { embedData, data } = embed;\n\n if (embedData.openIn === \"new-context\" || isOembed) {\n return (\n <a href={data.path} data-embed-type=\"content-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n {children}\n </a>\n );\n }\n\n return <a href={data.path}>{children}</a>;\n};\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAa,oBAAoB,EAAE,OAAO,UAAU,eAAsB;CACxE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,oBAAC;EAAK,OAAM;EAAa;EAAQ;YAC/B,qBAAC,qBACC,oBAAC,oBAAM,GAAG,EAAE,kBAAkB,CAAC,MAAW,EACzC,YACI;GACF;CAIX,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,WAAW,iBAAiB,SACxC,QACE,oBAAC;EAAE,MAAM,KAAK;EAAM,mBAAgB;EAAe,QAAO;EAAS,KAAI;EACpE;GACC;AAIR,QAAO,oBAAC;EAAE,MAAM,KAAK;EAAO;GAAa"}
@@ -3,6 +3,13 @@ import { styled } from "@ndla/styled-system/jsx";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/Embed/CopyrightEmbed.tsx
6
+ /**
7
+ * Copyright (c) 2024-present, NDLA.
8
+ *
9
+ * This source code is licensed under the GPLv3 license found in the
10
+ * LICENSE file in the root directory of this source tree.
11
+ *
12
+ */
6
13
  const StyledCopyrightContent = styled("div", { base: { marginBlockEnd: "xsmall" } });
7
14
  const CopyrightEmbed = ({ embed, children }) => {
8
15
  return /* @__PURE__ */ jsxs("figure", {
@@ -1 +1 @@
1
- {"version":3,"file":"CopyrightEmbed.mjs","names":[],"sources":["../../src/Embed/CopyrightEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport type { ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n embed: CopyrightMetaData;\n children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n base: {\n marginBlockEnd: \"xsmall\",\n },\n});\n\nexport const CopyrightEmbed = ({ embed, children }: Props) => {\n return (\n <figure data-embed-type=\"copyright\">\n <StyledCopyrightContent data-copyright-content=\"\">{children}</StyledCopyrightContent>\n <EmbedByline type=\"copyright\" copyright={embed.embedData.copyright} />\n </figure>\n );\n};\n"],"mappings":";;;;;AAkBA,MAAM,yBAAyB,OAAO,OAAO,EAC3C,MAAM,EACJ,gBAAgB,UACjB,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,eAAsB;AAC5D,QACE,qBAAC;EAAO,mBAAgB;aACtB,oBAAC;GAAuB,0BAAuB;GAAI;IAAkC,EACrF,oBAAC;GAAY,MAAK;GAAY,WAAW,MAAM,UAAU;IAAa;GAC/D"}
1
+ {"version":3,"file":"CopyrightEmbed.mjs","names":[],"sources":["../../src/Embed/CopyrightEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport type { ReactNode } from \"react\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n embed: CopyrightMetaData;\n children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n base: {\n marginBlockEnd: \"xsmall\",\n },\n});\n\nexport const CopyrightEmbed = ({ embed, children }: Props) => {\n return (\n <figure data-embed-type=\"copyright\">\n <StyledCopyrightContent data-copyright-content=\"\">{children}</StyledCopyrightContent>\n <EmbedByline type=\"copyright\" copyright={embed.embedData.copyright} />\n </figure>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,yBAAyB,OAAO,OAAO,EAC3C,MAAM,EACJ,gBAAgB,UACjB,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,eAAsB;AAC5D,QACE,qBAAC;EAAO,mBAAgB;aACtB,oBAAC;GAAuB,0BAAuB;GAAI;IAAkC,EACrF,oBAAC;GAAY,MAAK;GAAY,WAAW,MAAM,UAAU;IAAa;GAC/D"}
@@ -5,6 +5,13 @@ import { ark } from "@ark-ui/react";
5
5
  import { css, cva } from "@ndla/styled-system/css";
6
6
 
7
7
  //#region src/Embed/EmbedWrapper.tsx
8
+ /**
9
+ * Copyright (c) 2024-present, NDLA.
10
+ *
11
+ * This source code is licensed under the GPLv3 license found in the
12
+ * LICENSE file in the root directory of this source tree.
13
+ *
14
+ */
8
15
  const embedWrapperRecipe = cva({
9
16
  base: { position: "relative" },
10
17
  defaultVariants: { noClear: false },
@@ -1 +1 @@
1
- {"version":3,"file":"EmbedWrapper.mjs","names":[],"sources":["../../src/Embed/EmbedWrapper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\n\nconst embedWrapperRecipe = cva({\n base: {\n position: \"relative\",\n },\n defaultVariants: {\n noClear: false,\n },\n variants: {\n noClear: {\n true: {\n \"& + [data-embed-wrapper]\": {\n clear: \"both\",\n },\n },\n false: {\n clear: \"both\",\n },\n },\n },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n ({ noClear, css: cssProp, ...props }, ref) => (\n <StyledEmbedWrapper\n css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n data-embed-wrapper=\"\"\n {...props}\n ref={ref}\n />\n ),\n);\n"],"mappings":";;;;;;;AAcA,MAAM,qBAAqB,IAAI;CAC7B,MAAM,EACJ,UAAU,YACX;CACD,iBAAiB,EACf,SAAS,OACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,QACR,EACF;EACD,OAAO,EACL,OAAO,QACR;EACF,EACF;CACF,CAAC;AAMF,MAAM,qBAAqB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEvE,MAAa,eAAe,YACzB,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC;CACC,KAAK,IAAI,IAAI,mBAAmB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAC1D,sBAAmB;CACnB,GAAI;CACC;EACL,CAEL"}
1
+ {"version":3,"file":"EmbedWrapper.mjs","names":[],"sources":["../../src/Embed/EmbedWrapper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst embedWrapperRecipe = cva({\n base: {\n position: \"relative\",\n },\n defaultVariants: {\n noClear: false,\n },\n variants: {\n noClear: {\n true: {\n \"& + [data-embed-wrapper]\": {\n clear: \"both\",\n },\n },\n false: {\n clear: \"both\",\n },\n },\n },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n ({ noClear, css: cssProp, ...props }, ref) => (\n <StyledEmbedWrapper\n css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n data-embed-wrapper=\"\"\n {...props}\n ref={ref}\n />\n ),\n);\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,qBAAqB,IAAI;CAC7B,MAAM,EACJ,UAAU,YACX;CACD,iBAAiB,EACf,SAAS,OACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,QACR,EACF;EACD,OAAO,EACL,OAAO,QACR;EACF,EACF;CACF,CAAC;AAMF,MAAM,qBAAqB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEvE,MAAa,eAAe,YACzB,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC;CACC,KAAK,IAAI,IAAI,mBAAmB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAC1D,sBAAmB;CACnB,GAAI;CACC;EACL,CAEL"}
@@ -7,6 +7,13 @@ import { useTranslation } from "react-i18next";
7
7
  import { jsx } from "react/jsx-runtime";
8
8
 
9
9
  //#region src/Embed/ExternalEmbed.tsx
10
+ /**
11
+ * Copyright (c) 2023-present, NDLA.
12
+ *
13
+ * This source code is licensed under the GPLv3 license found in the
14
+ * LICENSE file in the root directory of this source tree.
15
+ *
16
+ */
10
17
  const StyledFigure = styled(Figure, { base: { "& iframe": {
11
18
  height: "auto",
12
19
  width: "100%"
@@ -1 +1 @@
1
- {"version":3,"file":"ExternalEmbed.mjs","names":[],"sources":["../../src/Embed/ExternalEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const figRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const iframe = figRef.current?.querySelector(\"iframe\");\n if (iframe) {\n const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"external\" />;\n }\n\n const { embedData, data } = embed;\n\n if (embedData.type === \"fullscreen\") {\n const image = {\n src: data.iframeImage?.image.imageUrl,\n alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n };\n return (\n <Figure data-embed-type=\"external\">\n <ResourceBox\n image={image}\n title={embedData.title ?? \"\"}\n url={embedData.url}\n caption={embedData.caption ?? \"\"}\n buttonText={t(\"license.other.itemImage.ariaLabel\")}\n />\n </Figure>\n );\n }\n\n return (\n <StyledFigure\n data-embed-type=\"external\"\n ref={figRef}\n dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n />\n );\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,SAAS,OAAoB,KAAK;AAExC,iBAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,SAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,oBAAC;GAAO,mBAAgB;aACtB,oBAAC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;;AAIb,QACE,oBAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;GAC7D"}
1
+ {"version":3,"file":"ExternalEmbed.mjs","names":[],"sources":["../../src/Embed/ExternalEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const figRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const iframe = figRef.current?.querySelector(\"iframe\");\n if (iframe) {\n const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"external\" />;\n }\n\n const { embedData, data } = embed;\n\n if (embedData.type === \"fullscreen\") {\n const image = {\n src: data.iframeImage?.image.imageUrl,\n alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n };\n return (\n <Figure data-embed-type=\"external\">\n <ResourceBox\n image={image}\n title={embedData.title ?? \"\"}\n url={embedData.url}\n caption={embedData.caption ?? \"\"}\n buttonText={t(\"license.other.itemImage.ariaLabel\")}\n />\n </Figure>\n );\n }\n\n return (\n <StyledFigure\n data-embed-type=\"external\"\n ref={figRef}\n dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,SAAS,OAAoB,KAAK;AAExC,iBAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,SAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,oBAAC;GAAO,mBAAgB;aACtB,oBAAC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;;AAIb,QACE,oBAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;GAC7D"}
@@ -3,6 +3,13 @@ import { useTranslation } from "react-i18next";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/Embed/FootnoteEmbed.tsx
6
+ /**
7
+ * Copyright (c) 2023-present, NDLA.
8
+ *
9
+ * This source code is licensed under the GPLv3 license found in the
10
+ * LICENSE file in the root directory of this source tree.
11
+ *
12
+ */
6
13
  const StyledSup = styled("sup", { base: { "& a": {
7
14
  textStyle: "label.xsmall",
8
15
  marginInlineStart: "1"
@@ -1 +1 @@
1
- {"version":3,"file":"FootnoteEmbed.mjs","names":[],"sources":["../../src/Embed/FootnoteEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n base: {\n \"& a\": {\n textStyle: \"label.xsmall\",\n marginInlineStart: \"1\",\n },\n },\n});\n\nexport const FootnoteEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return <div>{t(\"error\")}</div>;\n }\n\n return (\n <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n <StyledSup>\n <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n </StyledSup>\n </span>\n );\n};\n"],"mappings":";;;;;AAgBA,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;CACpB,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,QACE,oBAAC;EAAK,IAAI,MAAM,MAAM,KAAK;EAAY,mBAAgB;YACrD,oBAAC,uBACC,oBAAC;GAAE,MAAM,QAAQ,MAAM,KAAK;GAAY,QAAO;aAAS,IAAI,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP"}
1
+ {"version":3,"file":"FootnoteEmbed.mjs","names":[],"sources":["../../src/Embed/FootnoteEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n base: {\n \"& a\": {\n textStyle: \"label.xsmall\",\n marginInlineStart: \"1\",\n },\n },\n});\n\nexport const FootnoteEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return <div>{t(\"error\")}</div>;\n }\n\n return (\n <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n <StyledSup>\n <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n </StyledSup>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;CACpB,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,QACE,oBAAC;EAAK,IAAI,MAAM,MAAM,KAAK;EAAY,mBAAgB;YACrD,oBAAC,uBACC,oBAAC;GAAE,MAAM,QAAQ,MAAM,KAAK;GAAY,QAAO;aAAS,IAAI,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP"}
@@ -8,6 +8,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
8
8
  import { Portal } from "@ark-ui/react";
9
9
 
10
10
  //#region src/Embed/GlossEmbed.tsx
11
+ /**
12
+ * Copyright (c) 2024-present, NDLA.
13
+ *
14
+ * This source code is licensed under the GPLv3 license found in the
15
+ * LICENSE file in the root directory of this source tree.
16
+ *
17
+ */
11
18
  const StyledPopoverContent = styled(PopoverContent, { base: { width: "surface.xlarge" } });
12
19
  const GlossEmbed = ({ embed, children }) => {
13
20
  const contentRef = useRef(null);