@ndla/ui 55.0.13-alpha.0 → 55.0.15-alpha.0

package/src/List/OrderedList.tsx

@@ -1,158 +0,0 @@
-/**
- * Copyright (c) 2022-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 { CSSProperties, forwardRef, HTMLAttributes, useMemo } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { fonts, spacing } from "@ndla/core";
-
-export const LetterCSS = css`
-  padding-left: ${spacing.medium};
-  > li {
-    counter-increment: level1;
-
-    :before {
-      content: counter(level1, upper-alpha) ".";
-    }
-    > ol[data-type="letters"] {
-      > li {
-        :before {
-          content: counter(level1, lower-alpha) ".";
-        }
-        > ol[data-type="letters"] {
-          padding-left: 0;
-          > li {
-            padding-left: ${spacing.normal};
-            :before {
-              left: ${spacing.small};
-              position: absolute;
-              content: counter(level1, lower-roman) ".";
-              transform: translateX(-100%);
-            }
-            > ol[data-type="letters"] {
-              padding-left: 0;
-              > li {
-                padding-left: ${spacing.normal};
-                :before {
-                  left: ${spacing.small};
-                  position: absolute;
-                  content: counter(level1, lower-roman) ".";
-                  transform: translateX(-100%);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-export const NumberCSS = css`
-  padding-left: ${spacing.normal};
-  > li {
-    counter-increment: level1;
-    :before {
-      content: counter(level1, decimal) ".";
-    }
-    > ol:not([data-type="letters"]) {
-      counter-reset: level2;
-      &[data-count="true"] {
-        counter-reset: level2 var(--start, 0);
-      }
-      > li {
-        padding-left: ${spacing.nsmall};
-        counter-increment: level2;
-        :before {
-          content: counter(level1, decimal) "." counter(level2, decimal) ".";
-        }
-        > ol:not([data-type="letters"]) {
-          counter-reset: level3;
-          &[data-count="true"] {
-            counter-reset: level3 var(--start, 0);
-          }
-          > li {
-            padding-left: ${spacing.medium};
-            counter-increment: level3;
-            :before {
-              content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) ".";
-            }
-            > ol:not([data-type="letters"]) {
-              counter-reset: level4;
-              &[data-count="true"] {
-                counter-reset: level4 var(--start, 0);
-              }
-
-              > li {
-                padding-left: ${spacing.large};
-                counter-increment: level4;
-                :before {
-                  content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) "."
-                    counter(level4, decimal) ".";
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-const StyledOl = styled.ol`
-  ${fonts.sizes("18px", "29px")};
-  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;
-    position: relative;
-    ::before {
-      position: absolute;
-      left: -${spacing.normal};
-    }
-    > ol {
-      padding-bottom: 0;
-      margin-left: 0;
-    }
-  }
-
-  &:not([data-type="letters"]) {
-    ${NumberCSS}
-  }
-
-  &[data-type="letters"] {
-    ${LetterCSS}
-  }
-`;
-
-interface Props extends HTMLAttributes<HTMLOListElement> {
-  type?: "letters";
-  start?: number;
-}
-
-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} data-count={start != null} style={style} ref={ref} {...rest}>
-      {children}
-    </StyledOl>
-  );
-});
-
-export default OrderedList;

package/src/List/UnOrderedList.tsx

@@ -1,43 +0,0 @@
-/**
- * Copyright (c) 2022-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 { forwardRef, HTMLAttributes } from "react";
-import styled from "@emotion/styled";
-import { colors, fonts, spacing } from "@ndla/core";
-
-const StyledUl = styled.ul`
-  padding-left: ${spacing.nsmall};
-  margin: ${spacing.normal} 0 ${spacing.normal} ${spacing.normal};
-  ${fonts.size.text.content};
-
-  ul {
-    margin: 0;
-  }
-
-  > li {
-    ::marker {
-      color: ${colors.brand.secondary};
-    }
-  }
-  // List item
-  li {
-    padding-top: 0;
-    padding-left: ${spacing.nsmall};
-    margin-top: ${spacing.nsmall};
-  }
-`;
-
-const UnOrderedList = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ children, ...rest }, ref) => {
-  return (
-    <StyledUl ref={ref} {...rest}>
-      {children}
-    </StyledUl>
-  );
-});
-
-export default UnOrderedList;

package/src/List/UnorderedList.stories.tsx

@@ -1,72 +0,0 @@
-/**
- * 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 } from "@storybook/react";
-import UnOrderedList from "./UnOrderedList";
-
-export default {
-  title: "Base styles/UnorderedList",
-  tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen",
-  },
-  component: UnOrderedList,
-} as Meta<typeof UnOrderedList>;
-
-export const Default: StoryFn = () => (
-  <UnOrderedList>
-    <li>Listepunkt 1</li>
-    <li>Listepunkt 2</li>
-    <li>
-      Listepunkt 3
-      <UnOrderedList>
-        <li>Listepunkt 1</li>
-        <li>Listepunkt 2</li>
-        <li>
-          Listepunkt 3
-          <UnOrderedList>
-            <li>Listepunkt 1</li>
-            <li>Listepunkt 2</li>
-            <li>
-              Listepunkt 3
-              <UnOrderedList>
-                <li>Listepunkt 1</li>
-                <li>Listepunkt 2</li>
-                <li>Listepunkt 3</li>
-              </UnOrderedList>
-            </li>
-          </UnOrderedList>
-        </li>
-      </UnOrderedList>
-    </li>
-    <li>Listepunkt 4</li>
-  </UnOrderedList>
-);
-
-export const NoStyle: StoryFn = () => (
-  <ul>
-    <li>Listepunkt 1</li>
-    <li>Listepunkt 2</li>
-    <li>
-      Listepunkt 3
-      <ul>
-        <li>Listepunkt 1</li>
-        <li>Listepunkt 2</li>
-        <li>
-          Listepunkt 3
-          <ul>
-            <li>Listepunkt 1</li>
-            <li>Listepunkt 2</li>
-            <li>Listepunkt 3</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Listepunkt 4</li>
-  </ul>
-);

package/src/List/index.ts

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2022-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 OrderedList } from "./OrderedList";
-export { default as UnOrderedList } from "./UnOrderedList";

package/src/Notion/Notion.tsx

@@ -1,96 +0,0 @@
-/**
- * Copyright (c) 2021-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 { Fragment, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { breakpoints, fonts, mq, spacing } from "@ndla/core";
-
-const ContentWrapper = styled.div`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-  figure {
-    margin: 0;
-  }
-`;
-const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
-  width: ${(props) => (props.hasVisualElement ? "75%" : "100%")};
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    width: 100%;
-  }
-  font-family: ${fonts.sans};
-  ${fonts.sizes("18px", "28px")};
-  ${mq.range({ from: breakpoints.desktop })} {
-    ul,
-    ol {
-      margin: ${spacing.small} 0;
-      padding: 0 1rem 0 2rem;
-    }
-    ol > li {
-      margin-left: ${spacing.normal};
-    }
-  }
-`;
-
-const ClearWrapper = styled.div`
-  clear: both;
-`;
-
-const LabelsContainer = styled.div`
-  display: flex;
-  align-items: center;
-  ${fonts.sizes("14px", "24px")};
-  font-family: ${fonts.sans};
-  margin: ${spacing.small} 0;
-`;
-
-export type NotionProps = {
-  id: string | number;
-  labels?: string[];
-  text: ReactNode;
-  title: string;
-  visualElement: ReactNode;
-  imageElement?: ReactNode;
-  children?: ReactNode;
-  lang?: string;
-};
-
-const Notion = ({ id, labels = [], text, title, visualElement, imageElement, children, lang }: NotionProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <ContentWrapper>
-        {imageElement}
-        {visualElement}
-        <TextWrapper hasVisualElement={!!(imageElement || visualElement)} lang={lang}>
-          <b>{title.trim()}</b>
-          {text}
-          {!!labels.length && (
-            <LabelsContainer>
-              {t("searchPage.resultType.notionLabels")}
-              {labels.map((label, i) => (
-                <Fragment key={`notion-${id}-label-${i + 1}`}>
-                  {" "}
-                  {label}
-                  {i < labels?.length - 1 && <> &#8226;</>}
-                </Fragment>
-              ))}
-            </LabelsContainer>
-          )}
-        </TextWrapper>
-        <ClearWrapper />
-      </ContentWrapper>
-      {children}
-    </div>
-  );
-};
-
-export default Notion;

package/src/Notion/NotionImage.tsx

@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
-import { animations, breakpoints, colors, mq, spacing } from "@ndla/core";
-import { Image } from "@ndla/primitives";
-import { Figure } from "../Figure";
-
-const StyledImageWrapper = styled.div`
-  overflow: hidden;
-  width: 260px;
-  padding-top: ${spacing.small};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    margin: 0 auto;
-  }
-  &:hover {
-    img {
-      transform: scale(1.1);
-      opacity: 1.1;
-      transition-duration: 0.5s;
-    }
-  }
-`;
-
-const StyledImage = styled(Image)`
-  object-fit: cover;
-  max-height: 162px;
-  transition: transform ${animations.durations.fast};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    min-width: 260px;
-  }
-`;
-
-interface Props {
-  src: string;
-  alt: string;
-}
-
-const StyledFigure = styled(Figure)`
-  &:hover {
-    [data-open-button] {
-      background: ${colors.white};
-      svg {
-        transform: scale(1.2);
-      }
-    }
-  }
-`;
-
-export const NotionImage = ({ src, alt }: Props) => {
-  return (
-    <StyledFigure type={"full-column"}>
-      <StyledImageWrapper>
-        <StyledImage alt={alt} src={src} />
-      </StyledImageWrapper>
-    </StyledFigure>
-  );
-};

package/src/Notion/index.ts

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2021-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 Notion } from "./Notion";