@ndla/ui 53.0.0 → 54.0.0

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -15,7 +15,7 @@ import { ArticleWrapper } from "../Article";
 import CopyParagraphButton from "../CopyParagraphButton";
 import FactBox from "../FactBox";
 import FramedContent from "../FramedContent";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",
@@ -31,11 +31,11 @@ const meta: Meta<typeof UuDisclaimerEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/ErrorMessage/ErrorMessage.tsx

@@ -40,6 +40,10 @@ const CustomElementWrapper = styled.div`
   margin: ${spacing.large} 0;
 `;
 
+const MessageWrapper = styled.div`
+  margin-top: ${spacing.xsmall};
+`;
+
 interface Props {
   messages: {
     title: string;
@@ -75,14 +79,14 @@ export const ErrorMessage = ({ children, messages, illustration, illustrationEle
       </SafeLink>
     )}
     {messages.goToFrontPage && (
-      <div css={{ marginTop: spacing.xsmall }}>
+      <MessageWrapper>
         <SafeLink to="/">{messages.goToFrontPage}</SafeLink>
-      </div>
+      </MessageWrapper>
     )}
     {messages.logInFailed && (
-      <div css={{ marginTop: spacing.xsmall }}>
+      <MessageWrapper>
         <SafeLink to="/minndla">{messages.logInFailed}</SafeLink>
-      </div>
+      </MessageWrapper>
     )}
     {children}
   </StyledErrorMessage>

package/src/Figure/Figure.tsx

@@ -9,9 +9,9 @@
 // N.B These components is used to render static markup serverside
 
 import { ComponentPropsWithRef, forwardRef, useMemo } from "react";
-import { css } from "@emotion/react";
+import { SerializedStyles, css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { breakpoints, mq, spacing } from "@ndla/core";
 
 const StyledFigure = styled.figure`
   position: relative;
@@ -35,36 +35,114 @@ const StyledFigure = styled.figure`
   }
 `;
 
-const fullColumnStyle = css`
-  left: auto !important;
-  right: auto !important;
-  width: auto !important;
-  padding-left: 0;
-  padding-right: 0;
-  padding-bottom: ${spacing.large};
-  margin-bottom: 0;
-`;
+const floatSizes: Record<FigureType, SerializedStyles> = {
+  left: css`
+    margin-top: ${spacing.xsmall};
+    --float: left;
+    --width: 50%;
+    --width-desktop: 65%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-right: ${spacing.small};
+      }
+    }
+  `,
+  right: css`
+    margin-top: ${spacing.xsmall};
+    --float: right;
+    --width: 50%;
+    --width-desktop: 65%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-left: ${spacing.small};
+      }
+    }
+  `,
+  "small-left": css`
+    margin-top: ${spacing.xsmall};
+    --float: left;
+    --width: 25%;
+    --width-desktop: 50%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-right: ${spacing.small};
+      }
+    }
+  `,
+  "small-right": css`
+    margin-top: ${spacing.xsmall};
+    --float: right;
+    --width: 25%;
+    --width-desktop: 50%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-left: ${spacing.small};
+      }
+    }
+  `,
+  "xsmall-left": css`
+    --float: left;
+    --width: 25%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-right: ${spacing.small};
+        margin: ${spacing.xsmall} 0 ${spacing.medium};
+      }
+    }
+  `,
+  "xsmall-right": css`
+    --float: right;
+    --width: 25%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-left: ${spacing.small};
+        margin: ${spacing.xsmall} 0 ${spacing.normal} ${spacing.xsmall};
+      }
+    }
+  `,
+  full: css`
+    margin-top: ${spacing.xsmall};
+  `,
+  "full-column": css`
+    left: auto !important;
+    right: auto !important;
+    width: auto !important;
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: ${spacing.large};
+    margin-bottom: 0;
+  `,
+};
 
-const rightStyle = css`
-  float: right;
+const floatStyle = css`
+  ${mq.range({ from: breakpoints.tablet })} {
+    float: var(--float);
+    clear: var(--float);
+    width: var(--width) !important;
+    z-index: 1;
+    left: auto !important;
+    padding: 0;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    width: var(--width-desktop, var(--width)) !important;
+  }
 `;
 
-const smallTypes = ["small-right", "xsmall-right"];
-
-const Figure = forwardRef<HTMLElement, Props>(({ children, type = "full", className, ...rest }, ref) => {
-  const floatClass = type === "full-column" ? undefined : `u-float-${type}`;
-
+const Figure = forwardRef<HTMLElement, Props>(({ children, type = "full", ...rest }, ref) => {
   const styles = useMemo(() => {
     const styles = [];
-    if (!floatClass) styles.push(fullColumnStyle);
-    if (smallTypes.includes(type)) styles.push(rightStyle);
+    const floatCss = floatSizes[type];
+    if (type !== "full-column" && type !== "full") {
+      styles.push(floatStyle);
+    }
+    if (floatCss) {
+      styles.push(floatCss);
+    }
     return styles;
-  }, [floatClass, type]);
-
-  const classes = floatClass ? `${floatClass} ${className ?? ""}` : className;
+  }, [type]);
 
   return (
-    <StyledFigure data-sizetype={type} css={styles} className={classes} {...rest} ref={ref}>
+    <StyledFigure data-sizetype={type} css={styles} {...rest} ref={ref}>
       {children}
     </StyledFigure>
   );

package/src/Layout/LayoutItem.tsx

@@ -7,25 +7,42 @@
  */
 
 import { HTMLAttributes, ReactNode, useMemo } from "react";
+import { css } from "@emotion/react";
+import { mq, breakpoints } from "@ndla/core";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;
   layout?: "extend" | "center";
 }
 
+const centerCss = css`
+  position: relative !important;
+  width: 83.333%;
+  right: auto !important;
+  left: 8.333%;
+`;
+
+const extendCss = css`
+  ${mq.range({ from: breakpoints.tablet })} {
+    position: relative !important;
+    width: 83.333%;
+    right: auto !important;
+    left: 8.333%;
+  }
+`;
+
 export const LayoutItem = ({ children, layout, ...rest }: Props) => {
-  const className = useMemo(() => {
+  const style = useMemo(() => {
     if (layout === "extend") {
-      return "u-10/12@desktop u-push-1/12@desktop u-10/12@tablet u-push-1/12@tablet";
-    }
-    if (layout === "center") {
-      return "u-10/12 u-push-1/12";
+      return extendCss;
+    } else if (layout === "center") {
+      return centerCss;
     }
     return undefined;
   }, [layout]);
 
   return (
-    <section className={className} {...rest}>
+    <section css={style} {...rest}>
       {children}
     </section>
   );

package/src/Layout/index.ts

@@ -10,6 +10,5 @@ import LayoutItem from "./LayoutItem";
 
 export { default as OneColumn } from "./OneColumn";
 export { default as PageContainer } from "./PageContainer";
-export { default as Content } from "./Content";
 
 export default LayoutItem;

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -63,8 +63,8 @@ export default {
   },
   argTypes: {
     children: {
-      control: {
-        type: null,
+      table: {
+        disable: true,
       },
     },
   },

package/src/List/OrderedList.stories.tsx

@@ -82,7 +82,7 @@ export const WithNumbersAndLetters: StoryFn = () => (
 );
 
 export const StartingAtFive: StoryFn = () => (
-  <OrderedList start={5} data-type="letters" className="ol-reset-5">
+  <OrderedList start={5} data-type="letters">
     <li>Listepunkt 1</li>
     <li>Listepunkt 2</li>
     <li>
@@ -97,7 +97,7 @@ export const StartingAtFive: StoryFn = () => (
             <li>Listepunkt 2</li>
             <li>
               Listepunkt 3
-              <OrderedList className="ol-reset-5" start={5}>
+              <OrderedList start={5}>
                 <li>Listepunkt 1</li>
                 <li>Listepunkt 2</li>
                 <li>Listepunkt 3</li>

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/src/locale/messages-en.ts

@@ -944,6 +944,7 @@ const messages = {
         unShare: "Sharing stopped. The folder is no longer shared",
         copyLink: "Copy link to folder",
         link: "Link is copied",
+        savedLink: "Link to {{ name }} has been added to My folders.",
         header: {
           shared: "This folder is shared",
         },
@@ -1190,6 +1191,7 @@ const messages = {
     copyFolderDisclaimer:
       "This creates a copy of the folder. Any changes made to the original folder will not be updated here.",
     loginCopyFolderPitch: "Do you wish to copy this folder?",
+    loginSaveFolderLinkPitch: "Do you wish to save the link to this shared folder?",
     help: "Help",
     more: "More options",
     selectView: "Select view",

package/src/locale/messages-nb.ts

@@ -944,6 +944,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt",
         },
@@ -1190,6 +1191,7 @@ const messages = {
     copyFolderDisclaimer:
       "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",

package/src/locale/messages-nn.ts

@@ -943,6 +943,7 @@ const messages = {
         sharedFolder: "Delt mappe",
         unShare: "Delinga er avslutta. Mappa er ikkje lenger delt",
         link: "Lenka er kopiert",
+        savedLink: "Lenka til  {{ name }} er lagt til i Mine mapper.",
         copyLink: "Kopier lenke til mappa",
         header: {
           shared: "Denne mappa er delt",
@@ -1190,6 +1191,7 @@ const messages = {
     copyFolderDisclaimer:
       "Dette lagar ein kopi av mappa. Eventuelle endringar i originalmappa vil ikkje bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappa?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagra lenka til denne delte mappa?",
     help: "Hjelp",
     more: "Fleire val",
     selectView: "Velg visning",

package/src/locale/messages-se.ts

@@ -946,6 +946,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt",
         },
@@ -1192,6 +1193,7 @@ const messages = {
     copyFolderDisclaimer:
       "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",

package/src/locale/messages-sma.ts

@@ -948,6 +948,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt",
         },
@@ -1194,6 +1195,7 @@ const messages = {
     copyFolderDisclaimer:
       "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",

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;