@ndla/ui 53.0.1 → 54.0.0

package/src/List/OrderedList.tsx

@@ -6,22 +6,11 @@
  *
  */
 
-import { forwardRef, HTMLAttributes } from "react";
+import { CSSProperties, forwardRef, HTMLAttributes, useMemo } from "react";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { fonts, spacing } from "@ndla/core";
 
-export const generateListResets = (counterName: string) => {
-  let styles = "";
-  for (let $i = 0; $i < 50; $i++) {
-    styles += ` 
-      &.ol-reset-${$i} { counter-reset: ${counterName} ${$i - 1}; }  
-    `;
-  }
-
-  return styles;
-};
-
 export const LetterCSS = css`
   padding-left: ${spacing.medium};
   > li {
@@ -73,7 +62,9 @@ export const NumberCSS = css`
     }
     > ol:not([data-type="letters"]) {
       counter-reset: level2;
-      ${generateListResets("level2")};
+      &[data-count="true"] {
+        counter-reset: level2 var(--start, 0);
+      }
       > li {
         padding-left: ${spacing.nsmall};
         counter-increment: level2;
@@ -82,7 +73,9 @@ export const NumberCSS = css`
         }
         > ol:not([data-type="letters"]) {
           counter-reset: level3;
-          ${generateListResets("level3")};
+          &[data-count="true"] {
+            counter-reset: level3 var(--start, 0);
+          }
           > li {
             padding-left: ${spacing.medium};
             counter-increment: level3;
@@ -91,7 +84,10 @@ export const NumberCSS = css`
             }
             > ol:not([data-type="letters"]) {
               counter-reset: level4;
-              ${generateListResets("level4")};
+              &[data-count="true"] {
+                counter-reset: level4 var(--start, 0);
+              }
+
               > li {
                 padding-left: ${spacing.large};
                 counter-increment: level4;
@@ -110,12 +106,15 @@ export const NumberCSS = css`
 
 const StyledOl = styled.ol`
   ${fonts.sizes("18px", "29px")};
-  ${generateListResets("level1")};
   padding: 0;
   list-style-type: none;
   counter-reset: level1;
   margin: ${spacing.normal} 0 ${spacing.normal} ${spacing.normal};
 
+  &[data-count="true"] {
+    counter-reset: level1 var(--start, 0);
+  }
+
   > li {
     margin-top: ${spacing.nsmall};
     padding-top: 0;
@@ -144,9 +143,13 @@ interface Props extends HTMLAttributes<HTMLOListElement> {
   start?: number;
 }
 
-const OrderedList = forwardRef<HTMLOListElement, Props>(({ type, children, ...rest }, ref) => {
+const OrderedList = forwardRef<HTMLOListElement, Props>(({ type, children, start, ...rest }, ref) => {
+  const style = useMemo(() => {
+    return { "--start": start ? start - 1 : undefined } as CSSProperties;
+  }, [start]);
+
   return (
-    <StyledOl data-type={type} ref={ref} {...rest}>
+    <StyledOl data-type={type} data-count={start != null} style={style} ref={ref} {...rest}>
       {children}
     </StyledOl>
   );

package/src/TreeStructure/AddFolderButton.tsx

@@ -12,7 +12,7 @@ import styled from "@emotion/styled";
 import { ButtonV2 as Button } from "@ndla/button";
 import { Plus } from "@ndla/icons/action";
 import { Tooltip } from "@ndla/tooltip";
-import { IFolder } from "@ndla/types-backend/learningpath-api";
+import { IFolder } from "@ndla/types-backend/myndla-api";
 
 interface AddFolderButtonProps {
   canAddFolder: boolean;

package/src/TreeStructure/ComboboxButton.tsx

@@ -11,7 +11,7 @@ import styled from "@emotion/styled";
 import { ButtonV2 as Button, IconButtonV2 as IconButton } from "@ndla/button";
 import { breakpoints, colors, mq, spacing } from "@ndla/core";
 import { ChevronUp, ChevronDown } from "@ndla/icons/common";
-import { IFolder } from "@ndla/types-backend/learningpath-api";
+import { IFolder } from "@ndla/types-backend/myndla-api";
 import { useForwardedRef } from "@ndla/util";
 import { arrowNavigation } from "./arrowNavigation";
 import { treestructureId } from "./helperFunctions";

package/src/TreeStructure/FolderItem.tsx

@@ -15,7 +15,7 @@ import { ArrowDropDownRounded } from "@ndla/icons/common";
 import { FolderOutlined, FolderShared } from "@ndla/icons/contentType";
 import { Done } from "@ndla/icons/editor";
 import { SafeLink } from "@ndla/safelink";
-import { IFolder } from "@ndla/types-backend/learningpath-api";
+import { IFolder } from "@ndla/types-backend/myndla-api";
 import { arrowNavigation } from "./arrowNavigation";
 import { treestructureId } from "./helperFunctions";
 import { CommonFolderItemsProps } from "./types";

package/src/TreeStructure/FolderItems.tsx

@@ -9,7 +9,7 @@
 import { ReactNode } from "react";
 import styled from "@emotion/styled";
 import { animations } from "@ndla/core";
-import { IFolder } from "@ndla/types-backend/learningpath-api";
+import { IFolder } from "@ndla/types-backend/myndla-api";
 import FolderItem from "./FolderItem";
 import { treestructureId } from "./helperFunctions";
 import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc } from "./types";

package/src/TreeStructure/TreeStructure.stories.tsx

@@ -17,7 +17,7 @@ import { FieldErrorMessage, FieldHelper, FormControl, InputContainer, InputV3, L
 import { Spinner } from "@ndla/icons";
 import { Cross } from "@ndla/icons/action";
 import { Done } from "@ndla/icons/editor";
-import { IFolder } from "@ndla/types-backend/learningpath-api";
+import { IFolder } from "@ndla/types-backend/myndla-api";
 import { uuid } from "@ndla/util";
 import { flattenFolders } from "./helperFunctions";
 import TreeStructure, { TreeStructureProps } from "./TreeStructure";

package/src/TreeStructure/TreeStructure.tsx

@@ -9,7 +9,7 @@
 import { useEffect, useState, useMemo, useRef } from "react";
 import styled from "@emotion/styled";
 import { colors, fonts, misc, utils } from "@ndla/core";
-import { IFolder } from "@ndla/types-backend/learningpath-api";
+import { IFolder } from "@ndla/types-backend/myndla-api";
 import AddFolderButton from "./AddFolderButton";
 import ComboboxButton from "./ComboboxButton";
 import FolderItems from "./FolderItems";

package/src/TreeStructure/arrowNavigation.ts

@@ -7,7 +7,7 @@
  */
 
 import { KeyboardEvent } from "react";
-import { IFolder } from "@ndla/types-backend/learningpath-api";
+import { IFolder } from "@ndla/types-backend/myndla-api";
 
 const navigateVertical = (
   visibleFolders: IFolder[],

package/src/TreeStructure/helperFunctions.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { IFolder } from "@ndla/types-backend/learningpath-api";
+import { IFolder } from "@ndla/types-backend/myndla-api";
 import { TreeStructureType } from "./types";
 
 export const flattenFolders = (folders: IFolder[], openFolders?: string[]): IFolder[] => {

package/src/TreeStructure/types.ts

@@ -7,7 +7,7 @@
  */
 
 import { ReactNode } from "react";
-import { IFolder, IResource } from "@ndla/types-backend/learningpath-api";
+import { IFolder, IResource } from "@ndla/types-backend/myndla-api";
 
 export type TreeStructureType = "navigation" | "picker";
 

package/src/index.ts

@@ -117,7 +117,7 @@ export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
 
 export { i18nInstance, formatNestedMessages } from "./i18n";
 
-export { default as LayoutItem, OneColumn, PageContainer, Content } from "./Layout";
+export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
 
 export {
   MediaList,

package/es/Layout/Content.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-/**
- * Copyright (c) 2016-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 Content = _ref => {
-  let {
-    children
-  } = _ref;
-  return _jsx("div", {
-    className: "o-content",
-    children: children
-  });
-};
-export default Content;

package/lib/Layout/Content.d.ts

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2016-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 { ReactNode } from "react";
-interface Props {
-    children: ReactNode;
-}
-export declare const Content: ({ children }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default Content;

package/lib/Layout/Content.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Content = void 0;
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const Content = _ref => {
-  let {
-    children
-  } = _ref;
-  return (0, _jsxRuntime.jsx)("div", {
-    className: "o-content",
-    children: children
-  });
-};
-exports.Content = Content;
-var _default = exports.default = Content;

package/src/Layout/Content.tsx

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) 2016-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 { ReactNode } from "react";
-
-interface Props {
-  children: ReactNode;
-}
-
-export const Content = ({ children }: Props) => <div className="o-content">{children}</div>;
-
-export default Content;