@ndla/ui 50.15.3 → 52.0.0

package/src/Breadcrumb/Breadcrumb.stories.tsx

@@ -50,10 +50,6 @@ export const CollapseLast: StoryObj<typeof Breadcrumb> = {
   args: { collapseLast: true },
 };
 
-export const AutoCollapse: StoryObj<typeof Breadcrumb> = {
-  args: { autoCollapse: true },
-};
-
 export const CustomSeparator: StoryObj<typeof Breadcrumb> = {
   args: {
     renderSeparator: (item, totalCount) => (

package/src/Breadcrumb/Breadcrumb.tsx

@@ -9,12 +9,10 @@
 import { ReactNode, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { useComponentSize, useIsomorphicLayoutEffect } from "@ndla/hooks";
 import BreadcrumbItem, { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface Props {
   items: SimpleBreadcrumbItem[];
-  autoCollapse?: boolean;
   collapseFirst?: boolean;
   collapseLast?: boolean;
   renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
@@ -31,50 +29,18 @@ const StyledList = styled.ol`
   list-style: none;
 `;
 
-const Breadcrumb = ({
-  items,
-  autoCollapse,
-  renderItem,
-  renderSeparator,
-  collapseFirst,
-  collapseLast = true,
-}: Props) => {
+const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collapseLast = true }: Props) => {
   const { t } = useTranslation();
   const olRef = useRef<any>();
   const containerRef = useRef<HTMLDivElement>(null);
   // No idiomatic way of dealing with sets of refs yet
   // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
-  const breadcrumbItemRefs = useRef(new Map()).current;
-  const size = useComponentSize(containerRef);
-
-  useIsomorphicLayoutEffect(() => {
-    if (!autoCollapse) {
-      return;
-    }
-    // Create an array of all breadcrumb item refs
-    const items = Array.from(breadcrumbItemRefs).map(([key, value]) => value);
-
-    // Clear max width on all items
-    items.forEach((el) => {
-      el.setMaxWidth("none");
-    });
-
-    // Set maxWidth on breadcrumb text items iteratively until
-    // the ordered list fits on a single line. It's on a single line
-    // if the height of the list is less then 70.
-    items.forEach((el) => {
-      if (olRef.current.offsetHeight > 60) {
-        el.setMaxWidth("40px");
-      }
-    });
-  }, [size, items]);
 
   return (
     <BreadcrumbNav ref={containerRef} aria-label={t("breadcrumb.breadcrumb")}>
       <StyledList ref={olRef}>
         {items.map((item, index) => (
           <BreadcrumbItem
-            autoCollapse={autoCollapse}
             renderItem={renderItem}
             renderSeparator={renderSeparator}
             ref={(element) => {
@@ -86,9 +52,6 @@ const Breadcrumb = ({
                 if (element) {
                   element.setMaxWidth("none");
                 }
-                breadcrumbItemRefs.delete(item.to);
-              } else {
-                breadcrumbItemRefs.set(item.to, element);
               }
             }}
             key={typeof item.to === "string" ? item.to : item.to.pathname}

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -7,7 +7,6 @@
  */
 
 import { useRef, useImperativeHandle, ReactNode, forwardRef } from "react";
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { mq, spacing, breakpoints } from "@ndla/core";
 import { ChevronRight } from "@ndla/icons/common";
@@ -38,27 +37,14 @@ const StyledListItem = styled.li<AutoCollapseProps>`
   :before {
     display: none;
   }
-
-  ${({ autoCollapse }) =>
-    !autoCollapse &&
-    css`
-      ${mq.range({ until: breakpoints.tablet })} {
-        display: block;
-      }
-    `}
+  ${mq.range({ until: breakpoints.tablet })} {
+    display: block;
+  }
 `;
 
-const CollapseContainer = styled.div<AutoCollapseProps>`
+const CollapseContainer = styled.div`
   display: inline-block;
   color: inherit;
-  ${({ autoCollapse }) =>
-    autoCollapse &&
-    css`
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      display: inline-block;
-    `}
 `;
 
 const StyledChevron = styled(ChevronRight)`
@@ -92,7 +78,7 @@ const BreadcrumbItem = forwardRef<any, Props>(
     const isLast = index === totalCount - 1;
     return (
       <StyledListItem ref={liRef} autoCollapse={autoCollapse} aria-current={isLast ? "page" : undefined}>
-        <CollapseContainer autoCollapse={autoCollapse}>
+        <CollapseContainer>
           {renderItem ? (
             renderItem(item, totalCount)
           ) : isLast ? (

package/src/Breadcrumb/index.ts

@@ -10,8 +10,6 @@ import Breadcrumb from "./Breadcrumb";
 
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./BreadcrumbItem";
 
-export { default as HeaderBreadcrumb } from "./HeaderBreadcrumb";
-
 export { default as HomeBreadcrumb } from "./HomeBreadcrumb";
 
 export default Breadcrumb;

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>
     ),
   ],
 };