@ndla/ui 51.0.0 → 53.0.0

package/src/CodeBlock/CodeBlock.stories.tsx

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { IconButtonV2 } from "@ndla/button";
+import { DeleteForever } from "@ndla/icons/editor";
+import CodeBlock from "./CodeBlock";
+
+export default {
+  title: "Components/CodeBlock",
+  component: CodeBlock,
+  tags: ["autodocs"],
+  parameters: {
+    inlineStories: true,
+  },
+  args: {
+    title: "CodeBlock",
+    format: "html",
+    highlightedCode: `<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>is simply dummy text of the printing and typesetting industry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>is simply dummy text of the printing and typesetting industry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>is simply dummy text of the printing and typesetting industry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>`,
+    code: `<div class="demo-content">
+  <h2>Lorem ipsum</h2>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+</div>`,
+    actionButton: (
+      <IconButtonV2 aria-label="Slett" variant="ghost" colorTheme="danger">
+        <DeleteForever />
+      </IconButtonV2>
+    ),
+    showCopy: true,
+  },
+  argTypes: {
+    actionButton: {
+      table: {
+        type: {
+          detail: "Takes any ReactNode, but as the name implies: use a button component, preferably an icon-button",
+        },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+} as Meta<typeof CodeBlock>;
+
+export const HTML: StoryFn<typeof CodeBlock> = (args) => {
+  return <CodeBlock {...args} />;
+};
+
+export const CSS: StoryObj<typeof CodeBlock> = {
+  args: {
+    highlightedCode: `<span class="token selector">body</span> <span class="token punctuation">{</span>
+  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
+  <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
+  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode color">#ccc</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>`,
+    code: `body {
+  padding: 20px;
+  margin: 10px;
+  background: #ccc;
+}`,
+    format: "css",
+  },
+};
+
+export const JS: StoryObj<typeof CodeBlock> = {
+  args: {
+    highlightedCode: `<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"This"</span><span class="token punctuation">,</span> <span class="token string">"Little"</span><span class="token punctuation">,</span> <span class="token string">"Piggy"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> first <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token method function property-access">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>first<span class="token punctuation">)</span><span class="token punctuation">;</span>`,
+    code: `const arr = ["This", "Little", "Piggy"];
+const first = arr.shift();
+console.log(first);`,
+    format: "js",
+  },
+};
+
+export const Text: StoryObj<typeof CodeBlock> = {
+  args: {
+    highlightedCode: `Pure text without highlighting and no title`,
+    code: `Pure text without highlighting and no title`,
+    format: "text",
+  },
+};

package/src/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) 2020-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useState, useEffect, ReactNode, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { colors, fonts, spacing } from "@ndla/core";
+import { Copy } from "@ndla/icons/action";
+import { Done } from "@ndla/icons/editor";
+import { copyTextToClipboard } from "@ndla/util";
+import { ICodeLangugeOption, codeLanguageOptions } from "./codeLanguageOptions";
+
+const Wrapper = styled.div`
+  margin: 15px 0;
+`;
+
+const TitleBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const Title = styled.h3`
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 32px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: ${colors.text.primary};
+  margin: 5px 0;
+`;
+
+type Props = {
+  code: string;
+  highlightedCode: string;
+  format: string;
+  title?: string | null;
+  actionButton?: ReactNode;
+  showCopy?: boolean;
+};
+
+const StyledPre = styled.pre`
+  border-left: 4px solid ${colors.brand.dark};
+  background-color: ${colors.brand.greyLighter};
+  box-sizing: border-box;
+  overflow-x: auto;
+  .linenumber {
+    display: inline-block;
+    padding: 0 ${spacing.small};
+    border-right: 1px solid #d8d8d8;
+    margin-right: ${spacing.small};
+    color: #7d8b99;
+    text-align: right;
+    width: 40px;
+  }
+  .linenumber[data-first] {
+    padding-top: ${spacing.small};
+  }
+  .linenumber[data-last] {
+    padding-bottom: ${spacing.small};
+  }
+  code {
+    display: block;
+    ${fonts.sizes("14px", "20px")};
+    font-family:
+      Source Code Pro,
+      Monaco;
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+  }
+  code::before {
+    content: none;
+  }
+  &::before,
+  &::after {
+    content: none !important;
+  }
+
+  /* The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes */
+  .token.comment,
+  .token.block-comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #7d8b99;
+  }
+
+  .token.punctuation {
+    color: #5f6364;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.function-name,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #c92c2c;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.function,
+  .token.builtin,
+  .token.inserted {
+    color: #2f9c0a;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword,
+  .token.class-name {
+    color: #1990b8;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .language-css .token.string,
+  .style .token.string {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  .token.important {
+    font-weight: normal;
+  }
+
+  .token.bold {
+    font-weight: bold;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+`;
+
+const getTitleFromFormat = (format: string) => {
+  const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);
+  if (selectedLanguage) {
+    return selectedLanguage.title;
+  }
+  return;
+};
+
+export const Codeblock = ({ actionButton, code, highlightedCode, format, showCopy = false, title }: Props) => {
+  const { t } = useTranslation();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const codeWithLineNumbers = useMemo(() => {
+    return highlightedCode
+      .split("\n")
+      .map((line, i, arr) => {
+        return `<span><span class="linenumber" ${i === 0 ? 'data-first=""' : ""} ${
+          i === arr.length - 1 ? 'data-last=""' : ""
+        }>${i + 1}</span>${line}</span>`;
+      })
+      .join("\n");
+  }, [highlightedCode]);
+
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setInterval(() => setIsCopied(false), 3000);
+      // ensure interval is cleared - also if unmounted
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [isCopied]);
+
+  return (
+    <Wrapper>
+      <TitleBar>
+        <Title>{title || getTitleFromFormat(format)}</Title>
+        {actionButton}
+      </TitleBar>
+      <StyledPre>
+        <code className={`language-${format}`} dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }} />
+      </StyledPre>
+      {showCopy && (
+        <ButtonV2
+          title={t("codeBlock.copyButton")}
+          disabled={isCopied}
+          data-copied-title={t("codeBlock.copiedCode")}
+          data-copy-string={code}
+          onClick={() => {
+            copyTextToClipboard(code);
+            setIsCopied(true);
+          }}
+        >
+          {isCopied ? <Done aria-hidden="true" /> : <Copy aria-hidden="true" />}{" "}
+          {isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")}
+        </ButtonV2>
+      )}
+    </Wrapper>
+  );
+};
+
+export default Codeblock;

package/src/CodeBlock/codeLanguageOptions.ts

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export const codeLanguageOptions: Array<ICodeLangugeOption> = [
+  {
+    title: "Bash",
+    format: "bash",
+  },
+  {
+    title: "C",
+    format: "c",
+  },
+  {
+    title: "CSharp",
+    format: "csharp",
+  },
+  {
+    title: "CSS",
+    format: "css",
+  },
+  {
+    title: "Diff",
+    format: "diff",
+  },
+  {
+    title: "HTML",
+    format: "markup",
+  },
+  {
+    title: "Ini",
+    format: "ini",
+  },
+  {
+    title: "Java",
+    format: "java",
+  },
+  {
+    title: "Javascript",
+    format: "js",
+  },
+  {
+    title: "JSON",
+    format: "json",
+  },
+  {
+    title: "JSX",
+    format: "jsx",
+  },
+  {
+    title: "Kotlin",
+    format: "kotlin",
+  },
+  {
+    title: "LUA",
+    format: "lua",
+  },
+  {
+    title: "Markdown",
+    format: "markdown",
+  },
+  {
+    title: "Matlab",
+    format: "matlab",
+  },
+  {
+    title: "NSIS",
+    format: "nsis",
+  },
+  {
+    title: "PHP",
+    format: "php",
+  },
+  {
+    title: "Powershell",
+    format: "powershell",
+  },
+  {
+    title: "Python",
+    format: "python",
+  },
+  {
+    title: "Ruby",
+    format: "ruby",
+  },
+  {
+    title: "Rust",
+    format: "rust",
+  },
+  {
+    title: "SQL",
+    format: "sql",
+  },
+  {
+    title: "Text",
+    format: "text",
+  },
+  {
+    title: "VHDL",
+    format: "vhdl",
+  },
+  {
+    title: "XML",
+    format: "xml",
+  },
+];
+
+export interface ICodeLangugeOption {
+  title: string;
+  format: string;
+}

package/src/CodeBlock/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export { default as CodeBlock } from "./CodeBlock";
+export { codeLanguageOptions } from "./codeLanguageOptions";

package/src/CreatedBy/CreatedBy.tsx

@@ -51,11 +51,11 @@ const CreatedBy = ({ name, description, url, target = "_blank" }: Props) => (
           name
         )}
          {description} 
-        <StyledSafeLink to={`https://ndla.no`} target={target}>
+        <StyledSafeLink to={"https://ndla.no"} target={target}>
           NDLA
         </StyledSafeLink>
       </Text>
-      <Logo label={`NDLA`} to={`https://ndla.no`} />
+      <Logo label={"NDLA"} to={"https://ndla.no"} />
     </Wrapper>
   </Container>
 );

package/src/Embed/AudioEmbed.stories.tsx

@@ -10,6 +10,8 @@ import { Meta, StoryObj } from "@storybook/react";
 import { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
 import AudioEmbed from "./AudioEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
+import { ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: AudioEmbedData = {
   resource: "audio",
@@ -186,15 +188,15 @@ const meta: Meta<typeof AudioEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -10,6 +10,8 @@ import { Meta, StoryObj } from "@storybook/react";
 import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
 import BrightcoveEmbed from "./BrightcoveEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
+import { ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: BrightcoveEmbedData = {
   resource: "brightcove",
@@ -159,15 +161,15 @@ const meta: Meta<typeof BrightcoveEmbed> = {
   },
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };

package/src/Embed/BrightcoveEmbed.tsx

@@ -34,14 +34,14 @@ const BrightcoveIframe = styled.iframe`
   height: auto;
 `;
 
-export const makeIframeString = (url: string, width: string | number, height: string | number, title: string = "") => {
+export const makeIframeString = (url: string, width: string | number, height: string | number, title = "") => {
   const strippedWidth = typeof width === "number" ? width : width.replace(/\s*px/, "");
   const strippedHeight = typeof height === "number" ? height : height.replace(/\s*px/, "");
   const urlOrTitle = title || url;
   return `<iframe title="${urlOrTitle}" aria-label="${urlOrTitle}" src="${url}" width="${strippedWidth}" height="${strippedHeight}" allowfullscreen scrolling="no" frameborder="0" loading="lazy"></iframe>`;
 };
 
-export const isNumeric = (value: any) => !Number.isNaN(value - parseFloat(value));
+export const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));
 
 const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {
   const { account, videoid, player = "default" } = data;

package/src/Embed/CodeEmbed.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { Codeblock } from "@ndla/code";
 import { CodeMetaData } from "@ndla/types-embed";
+import { CodeBlock } from "../CodeBlock";
 import { Figure } from "../Figure";
 
 interface Props {
@@ -16,7 +16,7 @@ interface Props {
 const CodeEmbed = ({ embed }: Props) => {
   return (
     <Figure>
-      <Codeblock
+      <CodeBlock
         title={embed.embedData.title}
         code={embed.status === "success" ? embed.data.decodedContent : ""}
         highlightedCode={embed.status === "success" ? embed.data.highlightedCode : ""}

package/src/Embed/ConceptEmbed.stories.tsx

@@ -10,6 +10,8 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
 import ConceptEmbed from "./ConceptEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
+import { ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: "35",
@@ -231,15 +233,15 @@ const meta: Meta<typeof ConceptEmbed> = {
   },
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };