@ndla/ui 55.0.10-alpha.0 → 55.0.11-alpha.0

package/src/MyNdla/Resource/Folder.tsx

@@ -1,228 +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 { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { fonts, spacing, colors, mq, breakpoints, stackOrder } from "@ndla/core";
-import { FileDocumentOutline, Share, Link } from "@ndla/icons/common";
-import { FolderOutlined, FolderSharedOutlined } from "@ndla/icons/contentType";
-import { ResourceTitleLink } from "../../Resource/resourceComponents";
-
-export type LayoutType = "list" | "listLarger" | "block";
-
-const FolderWrapper = styled.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-word;
-
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    &:not([data-type="list"]) {
-      flex-direction: column;
-      align-items: unset;
-    }
-  }
-
-  &[data-type="block"] {
-    flex-direction: column;
-    align-items: unset;
-  }
-
-  border: 1px solid ${colors.brand.neutral7};
-  cursor: pointer;
-  border-radius: 2px;
-  box-shadow: none;
-  text-decoration: none;
-  &:hover {
-    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
-    transition-duration: 0.2s;
-    [data-title] {
-      color: ${colors.brand.primary};
-      text-decoration: underline;
-    }
-  }
-`;
-
-const TitleWrapper = styled.div`
-  display: flex;
-  margin: ${spacing.nsmall};
-  flex-direction: row;
-  align-items: center;
-  gap: ${spacing.xsmall};
-  justify-content: space-between;
-  &[data-type="block"] {
-    margin-bottom: 0;
-  }
-`;
-
-const IconWrapper = styled.div`
-  display: flex;
-  border-radius: 100%;
-  color: ${colors.brand.primary};
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-
-const FolderTitle = styled.h2`
-  ${fonts.sizes("16px", "20px")};
-  font-weight: ${fonts.weight.semibold};
-  margin: 0px !important;
-  flex: 1;
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-  /* Unfortunate css needed for multi-line text overflow ellipsis. */
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-`;
-
-const MenuWrapper = styled.div`
-  display: flex;
-  z-index: ${stackOrder.offsetSingle};
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const CountContainer = styled.div`
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  min-height: 44px;
-  gap: ${spacing.small};
-  margin: 0 ${spacing.small} 0 ${spacing.nsmall};
-
-  ${mq.range({ until: breakpoints.tablet })} {
-    &[data-type="list"] {
-      display: none;
-    }
-  }
-`;
-
-const IconTextWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xxsmall};
-  color: ${colors.brand.grey};
-  white-space: nowrap;
-  svg {
-    width: 13px;
-    height: 13px;
-  }
-  ${fonts.sizes(16)};
-`;
-
-interface IconCountProps {
-  type: "resource" | "folder";
-  count?: number;
-  layoutType: LayoutType;
-}
-
-const Count = ({ type, count, layoutType }: IconCountProps) => {
-  const Icon = type === "resource" ? FileDocumentOutline : FolderOutlined;
-  const { t } = useTranslation();
-  if (!count) return null;
-
-  return (
-    <IconTextWrapper data-type={layoutType}>
-      <Icon />
-      <span>{t(`myNdla.${type}s`, { count })}</span>
-    </IconTextWrapper>
-  );
-};
-
-interface Props {
-  id: string;
-  title: string;
-  author?: string;
-  subFolders?: number;
-  subResources?: number;
-  description?: string;
-  link: string;
-  type?: LayoutType;
-  menu?: ReactNode;
-  isShared?: boolean;
-  isOwner?: boolean;
-}
-
-const getIcon = (isOwner: boolean, isShared?: boolean) => {
-  if (!isOwner) {
-    return Link;
-  } else if (isShared) {
-    return FolderSharedOutlined;
-  } else {
-    return FolderOutlined;
-  }
-};
-
-const Folder = ({
-  id,
-  link,
-  title,
-  author,
-  subFolders,
-  subResources,
-  type = "list",
-  menu,
-  isShared,
-  isOwner = true,
-}: Props) => {
-  const { t } = useTranslation();
-  const Icon = getIcon(isOwner, isShared);
-
-  return (
-    <FolderWrapper data-type={type} id={id}>
-      <TitleWrapper data-type={type}>
-        <IconWrapper
-          aria-label={`${isShared ? `${t("myNdla.folder.sharing.shared")} ` : ""}${t("myNdla.folder.folder")}`}
-        >
-          <Icon />
-        </IconWrapper>
-        <ResourceTitleLink to={link}>
-          <FolderTitle data-title="" title={title}>
-            {title}
-          </FolderTitle>
-        </ResourceTitleLink>
-      </TitleWrapper>
-      <MenuWrapper>
-        <CountContainer data-type={type}>
-          {isShared && (
-            <IconTextWrapper>
-              <Share />
-              {!isOwner ? (
-                <span>
-                  {t("myNdla.folder.sharing.sharedBy")}
-                  {author ? `${author}` : t("myNdla.folder.sharing.sharedByAnonymous")}
-                </span>
-              ) : (
-                <span aria-hidden>{t("myNdla.folder.sharing.shared")}</span>
-              )}
-            </IconTextWrapper>
-          )}
-          {isOwner && (
-            <>
-              <Count layoutType={type} type={"folder"} count={subFolders} />
-              <Count layoutType={type} type={"resource"} count={subResources} />
-            </>
-          )}
-        </CountContainer>
-        {menu}
-      </MenuWrapper>
-    </FolderWrapper>
-  );
-};
-
-export default Folder;

package/src/MyNdla/Resource/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.
- *
- */
-
-import Folder from "./Folder";
-export { Folder };

package/src/MyNdla/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.
- *
- */
-
-import Folder from "./Resource/Folder";
-export { Folder };

package/src/Resource/BlockResource.stories.tsx

@@ -1,98 +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 styled from "@emotion/styled";
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { spacing } from "@ndla/core";
-import BlockResource from "./BlockResource";
-import { StoryResourceMenu, resourceTypesArr } from "./storyComponents";
-
-export default {
-  title: "My NDLA/BlockResource",
-  component: BlockResource,
-  tags: ["autodocs"],
-  argTypes: {
-    resourceImage: {
-      control: false,
-    },
-    resourceTypes: {
-      control: false,
-    },
-    menu: {
-      control: false,
-    },
-  },
-  args: {
-    id: "1234",
-    link: "",
-    title: "Tittel til ressurs",
-    description: "Dette er for eksempel en fagbeskrivelse! Dersom den er for lang vil den bli forkortet",
-    resourceImage: {
-      src: "https://cdn.pixabay.com/photo/2022/06/12/22/35/village-7258991_1280.jpg",
-      alt: "",
-    },
-    resourceTypes: [{ id: "urn:resourcetype:learningPath", name: "Læringssti" }],
-    tags: ["tag", "tag", "tag", "tag"],
-  },
-} as Meta<typeof BlockResource>;
-
-export const WithImage: StoryFn<typeof BlockResource> = (args) => {
-  return <BlockResource {...args} />;
-};
-
-export const WithoutImage: StoryObj<typeof BlockResource> = {
-  args: { resourceImage: { src: "", alt: "" } },
-};
-
-export const WithoutTags: StoryObj<typeof BlockResource> = {
-  args: { tags: [] },
-};
-
-export const WithOverflowingDescription: StoryObj<typeof BlockResource> = {
-  args: {
-    description:
-      "Beskrivelser trenger ikke å være så veldig lange. Det er ganske vanskelig å få plass til en livshistorie. Det lærte jeg da jeg var ung",
-  },
-};
-
-export const WithMenu: StoryObj<typeof BlockResource> = {
-  args: {
-    menu: <StoryResourceMenu />,
-  },
-};
-
-export const WithUnavailableResource: StoryObj<typeof BlockResource> = {
-  args: {
-    title: "Ressurs ikke tilgjengelig",
-    resourceTypes: [],
-    resourceImage: { src: "", alt: "" },
-  },
-};
-
-export const Loading: StoryObj<typeof BlockResource> = {
-  args: {
-    isLoading: true,
-  },
-};
-
-const BlockWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  flex-wrap: wrap;
-`;
-
-export const BlockView: StoryObj<typeof BlockResource> = {
-  args: { resourceImage: { src: "", alt: "" } },
-  render: ({ ...args }) => (
-    <BlockWrapper>
-      {resourceTypesArr.map((rt) => (
-        <BlockResource {...args} key={rt.id} resourceTypes={[rt]} />
-      ))}
-    </BlockWrapper>
-  ),
-};

package/src/Resource/BlockResource.tsx

@@ -1,212 +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 { ReactNode, useMemo } from "react";
-import styled from "@emotion/styled";
-import { colors, spacing, stackOrder } from "@ndla/core";
-import { Text } from "@ndla/typography";
-import {
-  CompressedTagList,
-  ResourceImageProps,
-  ResourceTypeList,
-  ResourceTitleLink,
-  LoaderProps,
-  ContentIconWrapper,
-  resourceHeadingStyle,
-} from "./resourceComponents";
-import ContentLoader from "../ContentLoader";
-import ContentTypeBadge from "../ContentTypeBadge";
-import Image from "../Image";
-import { contentTypeMapping, MISSING, resourceEmbedTypeMapping } from "../model/ContentType";
-
-const BlockElementWrapper = styled.div`
-  display: flex;
-  position: relative;
-  text-decoration: none;
-  box-shadow: none;
-  flex-direction: column;
-  max-width: 450px;
-  max-height: 240px;
-  border: 1px solid ${colors.brand.light};
-  border-radius: 2px;
-  color: ${colors.brand.greyDark};
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
-    transition-duration: 0.2s;
-    [data-link] {
-      color: ${colors.brand.primary};
-      text-decoration: underline;
-    }
-  }
-
-  &:hover,
-  &:focus,
-  &:focus-within {
-    [data-description] {
-      /* Unfortunate css needed for multi-line text overflow ellipsis. */
-      height: 3.1em;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
-  }
-`;
-
-const BlockDescription = styled(Text)`
-  display: -webkit-box;
-  line-clamp: 2;
-  height: 0em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: height 0.2s ease-out;
-`;
-
-const TagsAndActionMenu = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  z-index: ${stackOrder.offsetSingle};
-`;
-
-const BlockInfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const ContentWrapper = styled.div`
-  display: flex;
-  margin: ${spacing.small} ${spacing.small} 0 ${spacing.small};
-  flex-direction: column;
-`;
-
-const ImageWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  overflow: hidden;
-  align-items: center;
-  img {
-    object-fit: cover;
-    aspect-ratio: 4/3;
-    min-width: 100%;
-  }
-`;
-
-interface BlockImageProps {
-  image: ResourceImageProps;
-  loading?: boolean;
-  contentType: string;
-}
-
-const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
-  if (loading) {
-    return (
-      <ContentLoader height={"100%"} width={"100%"} viewBox={null} preserveAspectRatio="none">
-        <rect x="0" y="0" rx="3" ry="3" width="100%" height="100%" />
-      </ContentLoader>
-    );
-  }
-  if (image.src === "") {
-    return (
-      <ContentIconWrapper contentType={contentType}>
-        <ContentTypeBadge type={contentType} size="large" />
-      </ContentIconWrapper>
-    );
-  }
-  return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
-};
-
-const ResourceTypeAndTitleLoader = ({ children, loading }: LoaderProps) => {
-  if (loading) {
-    return (
-      <ContentLoader height={"18px"} width={"100%"} viewBox={null} preserveAspectRatio="none">
-        <rect x="0" y="0" rx="3" ry="3" width="20%" height="18px" />
-        <rect x="25%" y="0" rx="3" ry="3" width="20%" height="18px" />
-      </ContentLoader>
-    );
-  }
-
-  return <>{children}</>;
-};
-
-interface Props {
-  id: string;
-  link: string;
-  tagLinkPrefix?: string;
-  title: string;
-  resourceImage: ResourceImageProps;
-  tags?: string[];
-  description?: string;
-  menu?: ReactNode;
-  isLoading?: boolean;
-  targetBlank?: boolean;
-  resourceTypes?: { id: string; name: string }[];
-}
-
-const BlockResource = ({
-  id,
-  link,
-  tagLinkPrefix,
-  title,
-  tags,
-  resourceImage,
-  description,
-  menu,
-  isLoading,
-  targetBlank,
-  resourceTypes,
-}: Props) => {
-  const firstResourceType = resourceTypes?.[0]?.id ?? "";
-
-  const contentType = useMemo(() => {
-    if (!firstResourceType) {
-      return MISSING;
-    }
-    return (
-      contentTypeMapping[firstResourceType] ?? resourceEmbedTypeMapping[firstResourceType] ?? contentTypeMapping.default
-    );
-  }, [firstResourceType]);
-
-  return (
-    <BlockElementWrapper id={id}>
-      <ImageWrapper>
-        <BlockImage image={resourceImage} loading={isLoading} contentType={contentType} />
-      </ImageWrapper>
-      <BlockInfoWrapper>
-        <ContentWrapper>
-          <ResourceTypeAndTitleLoader loading={isLoading}>
-            <ResourceTitleLink
-              data-link=""
-              title={title}
-              target={targetBlank ? "_blank" : undefined}
-              to={link}
-              data-resource-available={contentType !== MISSING}
-            >
-              <Text element="span" textStyle="label-small" css={resourceHeadingStyle}>
-                {title}
-              </Text>
-            </ResourceTitleLink>
-          </ResourceTypeAndTitleLoader>
-          <ResourceTypeList resourceTypes={resourceTypes} />
-          <BlockDescription element="p" textStyle="meta-text-small" margin="none" data-description="">
-            {description}
-          </BlockDescription>
-        </ContentWrapper>
-        <TagsAndActionMenu>
-          {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-          {menu}
-        </TagsAndActionMenu>
-      </BlockInfoWrapper>
-    </BlockElementWrapper>
-  );
-};
-
-export default BlockResource;

package/src/Resource/ListResource.stories.tsx

@@ -1,99 +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 styled from "@emotion/styled";
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import ListResource from "./ListResource";
-import { StoryResourceMenu, resourceTypesArr } from "./storyComponents";
-import { spacing } from "../../../core/src";
-
-export default {
-  title: "My NDLA/ListResource",
-  component: ListResource,
-  tags: ["autodocs"],
-  argTypes: {
-    resourceImage: {
-      control: false,
-    },
-    resourceTypes: {
-      control: false,
-    },
-    menu: {
-      control: false,
-    },
-  },
-  args: {
-    id: "1234",
-    link: "",
-    title: "Tittel til ressurs",
-    resourceImage: {
-      src: "https://cdn.pixabay.com/photo/2022/06/12/22/35/village-7258991_1280.jpg",
-      alt: "",
-    },
-    resourceTypes: [{ id: "urn:resourcetype:learningPath", name: "Læringssti" }],
-    tags: ["tag", "tag", "tag", "tag"],
-  },
-} as Meta<typeof ListResource>;
-
-export const WithImage: StoryFn<typeof ListResource> = (args) => {
-  return <ListResource {...args} />;
-};
-
-export const WithoutImage: StoryObj<typeof ListResource> = {
-  args: {
-    resourceImage: { src: "", alt: "" },
-  },
-};
-
-export const WithoutTags: StoryObj<typeof ListResource> = {
-  args: { tags: [] },
-};
-
-export const WithOverflowingDescription: StoryObj<typeof ListResource> = {
-  args: {
-    description:
-      "Beskrivelser trenger ikke å være så veldig lange. Det er ganske vanskelig å få plass til en livshistorie. Det lærte jeg da jeg var en ung utvikler og utviklet denne komponenten. Jeg husker det nærmest som om det var i går, men det var det egentlig ikke. Det var i det gode år 2022",
-  },
-};
-
-export const WithMenu: StoryObj<typeof ListResource> = {
-  args: {
-    menu: <StoryResourceMenu />,
-  },
-};
-
-export const WithUnavailableResource: StoryObj<typeof ListResource> = {
-  args: {
-    title: "Ressurs ikke tilgjengelig",
-    resourceTypes: [],
-    resourceImage: { src: "", alt: "" },
-  },
-};
-
-export const Loading: StoryObj<typeof ListResource> = {
-  args: {
-    isLoading: true,
-  },
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-`;
-
-export const BlockView: StoryObj<typeof ListResource> = {
-  args: { resourceImage: { src: "", alt: "" } },
-  render: ({ ...args }) => (
-    <Wrapper>
-      {resourceTypesArr.map((rt) => (
-        <ListResource {...args} key={rt.id} resourceTypes={[rt]} />
-      ))}
-    </Wrapper>
-  ),
-};