@ndla/ui 55.0.14-alpha.0 → 55.0.16-alpha.0

package/src/CreatedBy/CreatedBy.tsx

@@ -1,63 +0,0 @@
-/**
- * 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 styled from "@emotion/styled";
-import { colors, fonts } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-import Logo from "../Logo";
-
-const Container = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Text = styled.div`
-  color: ${colors.text.light};
-  margin-right: 38px;
-  font-family: ${fonts.sans};
-  ${fonts.sizes("20px", "20px")};
-`;
-
-const StyledSafeLink = styled(SafeLink)`
-  color: ${colors.text.light};
-`;
-
-type Props = {
-  name: string;
-  description: string;
-  url?: string;
-  target?: string;
-};
-
-const CreatedBy = ({ name, description, url, target = "_blank" }: Props) => (
-  <Container>
-    <Wrapper>
-      <Text>
-        {url ? (
-          <StyledSafeLink to={url} target={target}>
-            {name}
-          </StyledSafeLink>
-        ) : (
-          name
-        )}
-        &nbsp;{description}&nbsp;
-        <StyledSafeLink to={"https://ndla.no"} target={target}>
-          NDLA
-        </StyledSafeLink>
-      </Text>
-      <Logo label={"NDLA"} to={"https://ndla.no"} />
-    </Wrapper>
-  </Container>
-);
-
-export default CreatedBy;

package/src/CreatedBy/index.ts

@@ -1,11 +0,0 @@
-/**
- * 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 CreatedBy from "./CreatedBy";
-
-export default CreatedBy;

package/src/LicenseByline/LicenseDescription.tsx

@@ -1,100 +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 { t } from "i18next";
-import { ReactNode, useState } from "react";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-
-interface Props {
-  icon?: ReactNode;
-  children?: ReactNode;
-  warningByline?: boolean;
-}
-
-const StyledFigCaption = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  align-items: center;
-  background: unset;
-  padding: unset;
-  font-size: unset;
-  color: unset;
-  p {
-    margin: 0;
-  }
-`;
-
-const StyledDescription = styled.div`
-  display: inline-flex;
-  white-space: pre-wrap;
-  &[data-warning="false"] {
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      &[data-open="true"] {
-        display: inline;
-      }
-      display: grid;
-      grid-template-columns: 1fr auto;
-      overflow: hidden;
-    }
-  }
-`;
-
-const TextContent = styled.span`
-  &[data-warning="false"] {
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      white-space: nowrap;
-      max-height: ${spacing.medium};
-      &[data-open="true"] {
-        white-space: pre-wrap;
-        max-height: none;
-      }
-      overflow: hidden;
-      text-overflow: ellipsis;
-      transition: max-height 0.7s ease-in;
-      margin: auto 0;
-    }
-  }
-`;
-
-const Button = styled(ButtonV2)`
-  color: ${colors.brand.primary};
-  font-weight: ${fonts.weight.semibold};
-  min-width: fit-content;
-  margin-left: ${spacing.small};
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    display: none;
-  }
-`;
-
-const LicenseDescription = ({ icon, children, warningByline = false }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <StyledFigCaption>
-      {icon}
-      <StyledDescription data-open={isOpen} data-warning={warningByline}>
-        <TextContent data-open={isOpen} data-warning={warningByline}>
-          {children}
-        </TextContent>
-        {!warningByline && (
-          <Button variant="link" onClick={handleToggle}>
-            {isOpen ? `${t("audio.readLessDescriptionLabel")}` : `${t("audio.readMoreDescriptionLabel")}`}
-          </Button>
-        )}
-      </StyledDescription>
-    </StyledFigCaption>
-  );
-};
-
-export default LicenseDescription;

package/src/List/OrderedList.stories.tsx

@@ -1,135 +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, StoryObj } from "@storybook/react";
-import OrderedList from "./OrderedList";
-
-/**
- * Lister bør ikke inneholde flere enn 10 punkter. Har du mye mer, bør du vurdere å organisere innholdet annerledes.
- */
-export default {
-  title: "Base Styles/Ordered List",
-  tags: ["autodocs"],
-  component: OrderedList,
-  parameters: {
-    inlineStories: true,
-  },
-  render: ({ ...args }) => (
-    <OrderedList {...args}>
-      <li>Listepunkt 1</li>
-      <li>Listepunkt 2</li>
-      <li>
-        Listepunkt 3
-        <OrderedList {...args}>
-          <li>Listepunkt 1</li>
-          <li>Listepunkt 2</li>
-          <li>
-            Listepunkt 3
-            <OrderedList {...args}>
-              <li>Listepunkt 1</li>
-              <li>Listepunkt 2</li>
-              <li>Listepunkt 3</li>
-            </OrderedList>
-          </li>
-        </OrderedList>
-      </li>
-      <li>Listepunkt 4</li>
-    </OrderedList>
-  ),
-} as Meta<typeof OrderedList>;
-
-export const Default: StoryObj = {};
-
-export const Letters: StoryObj = {
-  args: {
-    type: "letters",
-  },
-};
-
-export const WithNumbersAndLetters: StoryFn = () => (
-  <OrderedList>
-    <li>Listepunkt 1</li>
-    <li>Listepunkt 2</li>
-    <li>
-      Listepunkt 3
-      <OrderedList data-type="letters">
-        <li>Listepunkt 1</li>
-        <li>Listepunkt 2</li>
-        <li>
-          Listepunkt 3
-          <OrderedList data-type="letters">
-            <li>Listepunkt 1</li>
-            <li>Listepunkt 2</li>
-            <li>
-              Listepunkt 3
-              <OrderedList>
-                <li>Listepunkt 1</li>
-                <li>Listepunkt 2</li>
-                <li>Listepunkt 3</li>
-              </OrderedList>
-            </li>
-          </OrderedList>
-        </li>
-      </OrderedList>
-    </li>
-    <li>Listepunkt 4</li>
-  </OrderedList>
-);
-
-export const StartingAtFive: StoryFn = () => (
-  <OrderedList start={5} data-type="letters">
-    <li>Listepunkt 1</li>
-    <li>Listepunkt 2</li>
-    <li>
-      Listepunkt 3
-      <OrderedList data-type="letters">
-        <li>Listepunkt 1</li>
-        <li>Listepunkt 2</li>
-        <li>
-          Listepunkt 3
-          <OrderedList data-type="letters">
-            <li>Listepunkt 1</li>
-            <li>Listepunkt 2</li>
-            <li>
-              Listepunkt 3
-              <OrderedList start={5}>
-                <li>Listepunkt 1</li>
-                <li>Listepunkt 2</li>
-                <li>Listepunkt 3</li>
-              </OrderedList>
-            </li>
-          </OrderedList>
-        </li>
-      </OrderedList>
-    </li>
-    <li>Listepunkt 4</li>
-  </OrderedList>
-);
-
-export const NoStyle: StoryFn = () => (
-  <ol>
-    <li>Listepunkt 1</li>
-    <li>Listepunkt 2</li>
-    <li>
-      Listepunkt 3
-      <ol>
-        <li>Listepunkt 1</li>
-        <li>Listepunkt 2</li>
-        <li>
-          Listepunkt 3
-          <ol>
-            <li>Listepunkt 1</li>
-            <li>Listepunkt 2</li>
-            <li>Listepunkt 3</li>
-          </ol>
-        </li>
-      </ol>
-    </li>
-    <li>Listepunkt 4</li>
-  </ol>
-);

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";