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

package/src/Resource/ListResource.tsx

@@ -1,273 +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 { spacing, colors, breakpoints, mq, stackOrder } from "@ndla/core";
-import { Text } from "@ndla/typography";
-import {
-  CompressedTagList,
-  ResourceImageProps,
-  resourceHeadingStyle,
-  ResourceTitleLink as StyledLink,
-  ResourceTypeList,
-  LoaderProps,
-  ContentIconWrapper,
-} from "./resourceComponents";
-import ContentLoader from "../ContentLoader";
-import ContentTypeBadge from "../ContentTypeBadge";
-import Image from "../Image";
-import { contentTypeMapping, MISSING, resourceEmbedTypeMapping } from "../model/ContentType";
-
-const ListResourceWrapper = styled.div`
-  flex: 1;
-  display: grid;
-  position: relative;
-  grid-template-columns: auto minmax(50px, 1fr) auto;
-  grid-template-areas:
-    "image  topicAndTitle   tags"
-    "image  description     description";
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-      "image                topicAndTitle"
-      "description          description"
-      "tags                 tags";
-  }
-
-  cursor: pointer;
-  border: 1px solid ${colors.brand.neutral7};
-  border-radius: 2px;
-
-  &: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;
-    }
-  }
-`;
-
-interface StyledImageProps {
-  imageSize: "normal" | "compact";
-}
-
-const ImageWrapper = styled.div<StyledImageProps>`
-  grid-area: image;
-  width: 56px;
-  overflow: hidden;
-  border-radius: 2px;
-  display: flex;
-  margin: ${spacing.small};
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 4/3;
-  &[data-image-size="normal"] {
-    width: 136px;
-  }
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    width: 56px;
-    margin-bottom: 0;
-  }
-`;
-
-const StyledImage = styled(Image)`
-  object-fit: cover;
-  aspect-ratio: 4/3;
-`;
-
-const StyledResourceDescription = styled(Text)`
-  grid-area: description;
-  line-clamp: 2;
-  height: 3.1em;
-  margin: 0 ${spacing.small} ${spacing.small} 0;
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    margin: 0 ${spacing.small};
-  }
-  overflow: hidden;
-  text-overflow: ellipsis;
-  // Unfortunate css needed for multi-line text overflow ellipsis.
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-`;
-
-const TagsandActionMenu = styled.div`
-  grid-area: tags;
-  z-index: ${stackOrder.offsetSingle};
-  box-sizing: content-box;
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  align-items: center;
-  align-self: flex-start;
-  justify-items: flex-end;
-  overflow: hidden;
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    min-height: ${spacing.small};
-  }
-`;
-
-const TopicAndTitleWrapper = styled.div`
-  grid-area: topicAndTitle;
-  display: flex;
-  margin: ${spacing.small} 0;
-  flex-direction: column;
-  overflow: hidden;
-  margin-right: ${spacing.small};
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    margin-bottom: 0;
-  }
-`;
-
-interface ListResourceImageProps {
-  resourceImage: ResourceImageProps;
-  loading?: boolean;
-  type: "normal" | "compact";
-  contentType: string;
-  background?: boolean;
-}
-
-const ListResourceImage = ({ resourceImage, loading, type, contentType, background }: ListResourceImageProps) => {
-  if (!loading) {
-    if (resourceImage.src === "") {
-      return (
-        <ContentIconWrapper contentType={contentType}>
-          <ContentTypeBadge type={contentType} background={background} size="x-small" />
-        </ContentIconWrapper>
-      );
-    }
-    return (
-      <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === "compact" ? 56 : 136} />
-    );
-  }
-
-  return (
-    <ContentLoader height={"100%"} width={"100%"} viewBox={null} preserveAspectRatio="none">
-      <rect
-        x="0"
-        y="0"
-        rx="3"
-        ry="3"
-        width={type === "compact" ? "56" : "136"}
-        height={type === "compact" ? "40" : "96"}
-      />
-    </ContentLoader>
-  );
-};
-
-const TypeAndTitleLoader = ({ loading, children }: LoaderProps) => {
-  if (loading) {
-    return (
-      <ContentLoader height={"40px"} width={"100%"} viewBox={null} preserveAspectRatio="none">
-        <rect x="0" y="0" rx="3" ry="3" width={"100%"} height={"16"} />
-        <rect x="0" y="18" rx="3" ry="3" width={"70"} height={"16"} />
-        <rect x="80" y="18" rx="3" ry="3" width={"70"} height={"16"} />
-      </ContentLoader>
-    );
-  }
-  return <>{children}</>;
-};
-
-interface ResourceDescriptionProps {
-  description?: string;
-  loading?: boolean;
-}
-
-const Description = ({ description, loading }: ResourceDescriptionProps) => {
-  if (loading) {
-    return (
-      <ContentLoader height={"20px"} width={"100%"} viewBox={null} preserveAspectRatio="none">
-        <rect x="0" y="0" width="100%" height="20" />
-      </ContentLoader>
-    );
-  }
-  return (
-    <StyledResourceDescription element="p" textStyle="meta-text-small">
-      {description}
-    </StyledResourceDescription>
-  );
-};
-
-export interface ListResourceProps {
-  id: string;
-  link: string;
-  tagLinkPrefix?: string;
-  title: string;
-  resourceImage: ResourceImageProps;
-  resourceTypes: { id: string; name: string }[];
-  tags?: string[];
-  description?: string;
-  menu?: ReactNode;
-  isLoading?: boolean;
-  targetBlank?: boolean;
-}
-
-const ListResource = ({
-  id,
-  link,
-  tagLinkPrefix,
-  title,
-  tags,
-  resourceImage,
-  resourceTypes,
-  description,
-  menu,
-  isLoading = false,
-  targetBlank,
-}: ListResourceProps) => {
-  const showDescription = description !== undefined;
-  const imageType = showDescription ? "normal" : "compact";
-  const firstContentType = resourceTypes?.[0]?.id ?? "";
-  const embedResourceType = resourceEmbedTypeMapping[firstContentType];
-
-  const contentType = useMemo(() => {
-    if (!firstContentType) {
-      return MISSING;
-    }
-    return contentTypeMapping[firstContentType] ?? embedResourceType ?? contentTypeMapping.default;
-  }, [embedResourceType, firstContentType]);
-
-  return (
-    <ListResourceWrapper id={id}>
-      <ImageWrapper imageSize={imageType} data-image-size={imageType}>
-        <ListResourceImage
-          resourceImage={resourceImage}
-          loading={isLoading}
-          type={imageType}
-          background={!!embedResourceType}
-          contentType={contentType}
-        />
-      </ImageWrapper>
-      <TopicAndTitleWrapper>
-        <TypeAndTitleLoader loading={isLoading}>
-          <StyledLink
-            to={link}
-            data-link=""
-            target={targetBlank ? "_blank" : undefined}
-            data-resource-available={contentType !== MISSING}
-          >
-            <Text element="span" textStyle="label-small" css={resourceHeadingStyle} title={title}>
-              {title}
-            </Text>
-          </StyledLink>
-          <ResourceTypeList resourceTypes={resourceTypes} />
-        </TypeAndTitleLoader>
-      </TopicAndTitleWrapper>
-      {showDescription && <Description description={description} loading={isLoading} />}
-      <TagsandActionMenu>
-        {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-        {menu}
-      </TagsandActionMenu>
-    </ListResourceWrapper>
-  );
-};
-
-export default ListResource;

package/src/Resource/index.ts

@@ -1,12 +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 { ListResourceProps } from "./ListResource";
-export type { ListResourceProps };
-export { default as ListResource } from "./ListResource";
-export { default as BlockResource } from "./BlockResource";

package/src/Resource/resourceComponents.tsx

@@ -1,242 +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, HTMLAttributes, ReactNode, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
-import { colors, fonts, spacing, stackOrder } from "@ndla/core";
-import { DropdownMenu, DropdownContent, DropdownTrigger, DropdownItem } from "@ndla/dropdown-menu";
-import { HashTag } from "@ndla/icons/common";
-import { SafeLink, SafeLinkButton } from "@ndla/safelink";
-import { resourceEmbedTypeMapping } from "../model/ContentType";
-import resourceTypeColor from "../utils/resourceTypeColor";
-
-export interface ResourceImageProps {
-  alt: string;
-  src: string;
-}
-
-export const ResourceTitleLink = styled(SafeLink)`
-  box-shadow: none;
-  color: ${colors.brand.primary};
-  flex: 1;
-  &[data-resource-available="false"] {
-    color: ${colors.brand.grey};
-    font-style: italic;
-  }
-  :after {
-    content: "";
-    position: absolute;
-    z-index: ${stackOrder.offsetSingle};
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-`;
-
-const StyledTrigger = styled(IconButtonV2)`
-  margin: 0px ${spacing.xsmall};
-`;
-
-export const resourceHeadingStyle = css`
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  // Unfortunate css needed for multi-line text overflow ellipsis.
-  line-height: 1;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-  grid-area: resourceTitle;
-`;
-
-const StyledTagList = styled.ul`
-  list-style: none;
-  display: flex;
-  margin-left: ${spacing.small};
-  padding: 2px;
-  gap: ${spacing.xsmall};
-  overflow: hidden;
-  :last-child {
-    margin-right: ${spacing.small};
-  }
-`;
-
-const StyledTagListElement = styled.li`
-  padding: 0;
-  ${fonts.sizes(14)};
-`;
-
-const StyledSafeLink = styled(SafeLink)`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  box-shadow: none;
-  color: ${colors.brand.grey};
-  min-height: 44px;
-  min-width: 44px;
-  white-space: nowrap;
-  &:hover {
-    color: ${colors.brand.primary};
-  }
-`;
-
-const StyledResourceTypeList = styled.ul`
-  list-style: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-`;
-
-const StyledTopicDivider = styled.span`
-  margin: 0;
-  padding: 0 ${spacing.xxsmall};
-`;
-
-const StyledResourceListElement = styled.li`
-  white-space: nowrap;
-  ${fonts.sizes(12)};
-  margin: 0;
-  line-height: 1.5;
-  padding: 0;
-  display: flex;
-  align-items: center;
-`;
-
-const TagCounterWrapper = styled.span`
-  display: flex;
-  font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes("14px", "14px")};
-`;
-
-interface ContentIconProps extends HTMLAttributes<HTMLSpanElement> {
-  contentType: string;
-  children?: ReactNode;
-}
-
-const StyledContentIconWrapper = styled.span`
-  width: 100%;
-  aspect-ratio: 4/3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--content-background-color);
-`;
-
-export const ContentIconWrapper = ({ contentType, children, ...props }: ContentIconProps) => {
-  const contentIconWrapperVars = useMemo(
-    () =>
-      ({
-        "--content-background-color": resourceTypeColor(contentType),
-      }) as unknown as CSSProperties,
-    [contentType],
-  );
-  return (
-    <StyledContentIconWrapper {...props} style={contentIconWrapperVars}>
-      {children}
-    </StyledContentIconWrapper>
-  );
-};
-
-interface TagListProps {
-  tags?: string[];
-  tagLinkPrefix?: string;
-}
-
-export interface LoaderProps {
-  loading?: boolean;
-  children?: ReactNode;
-}
-
-export const TagList = ({ tags, tagLinkPrefix }: TagListProps) => {
-  const { t } = useTranslation();
-  if (!tags) return null;
-  return (
-    <StyledTagList aria-label={t("myNdla.tagList")}>
-      {tags.map((tag, i) => (
-        <StyledTagListElement key={`tag-${i}`}>
-          <StyledSafeLink to={`${tagLinkPrefix ? tagLinkPrefix : ""}/${encodeURIComponent(tag)}`}>
-            <HashTag />
-            {tag}
-          </StyledSafeLink>
-        </StyledTagListElement>
-      ))}
-    </StyledTagList>
-  );
-};
-
-interface CompressedTagListProps {
-  tags: string[];
-  tagLinkPrefix?: string;
-}
-
-export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProps) => {
-  const { t } = useTranslation();
-  const visibleTags = useMemo(() => tags.slice(0, 3), [tags]);
-  const remainingTags = useMemo(() => tags.slice(3, tags.length), [tags]);
-
-  return (
-    <>
-      <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />
-      {remainingTags.length > 0 && (
-        <DropdownMenu>
-          <DropdownTrigger>
-            <StyledTrigger
-              size="xsmall"
-              variant="ghost"
-              colorTheme="light"
-              aria-label={t("myNdla.moreTags", { count: remainingTags.length })}
-            >
-              {<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
-            </StyledTrigger>
-          </DropdownTrigger>
-          <DropdownContent showArrow>
-            {remainingTags.map((tag, i) => (
-              <DropdownItem key={`tag-${i}`}>
-                <SafeLinkButton
-                  to={`${tagLinkPrefix ?? ""}/${encodeURIComponent(tag)}`}
-                  variant="ghost"
-                  colorTheme="light"
-                >
-                  <HashTag />
-                  {tag}
-                </SafeLinkButton>
-              </DropdownItem>
-            ))}
-          </DropdownContent>
-        </DropdownMenu>
-      )}
-    </>
-  );
-};
-
-interface ResourceTypeListProps {
-  resourceTypes?: { id: string; name: string }[];
-}
-
-export const ResourceTypeList = ({ resourceTypes }: ResourceTypeListProps) => {
-  const { t } = useTranslation();
-  if (!resourceTypes) return null;
-  return (
-    <StyledResourceTypeList aria-label={t("navigation.topics")}>
-      {resourceTypes.map((resource, i) => (
-        <StyledResourceListElement key={resource.id}>
-          {resourceEmbedTypeMapping[resource.id]
-            ? t(`embed.type.${resourceEmbedTypeMapping[resource.id]}`)
-            : resource.name}
-          {i !== resourceTypes.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
-        </StyledResourceListElement>
-      ))}
-    </StyledResourceTypeList>
-  );
-};

package/src/Resource/storyComponents.tsx

@@ -1,49 +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 { IconButtonV2, ButtonV2 } from "@ndla/button";
-import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from "@ndla/dropdown-menu";
-import { Pencil } from "@ndla/icons/action";
-import { HorizontalMenu } from "@ndla/icons/contentType";
-import { DeleteForever } from "@ndla/icons/editor";
-
-export const resourceTypesArr = [
-  { id: "urn:resourcetype:learningPath", name: "Læringssti" },
-  { id: "urn:resourcetype:subjectMaterial", name: "Fagstoff" },
-  {
-    id: "urn:resourcetype:tasksAndActivities",
-    name: "Oppgaver og aktiviteter",
-  },
-  { id: "urn:resourcetype:reviewResource", name: "Vurderingsressurs" },
-  { id: "urn:resourcetype:externalResource", name: "Ekstern læringsressurs" },
-  { id: "urn:resourcetype:SourceMaterial", name: "Kildemateriale" },
-];
-
-export const StoryResourceMenu = () => (
-  <DropdownMenu>
-    <DropdownTrigger>
-      <IconButtonV2 aria-label="Show more" title="Show more" variant="ghost" colorTheme="light">
-        <HorizontalMenu />
-      </IconButtonV2>
-    </DropdownTrigger>
-    <DropdownContent>
-      <DropdownItem>
-        <ButtonV2 variant="ghost" colorTheme="light" shape="sharp" size="small" fontWeight="normal">
-          <Pencil />
-          Rediger
-        </ButtonV2>
-      </DropdownItem>
-      <DropdownItem>
-        <ButtonV2 variant="ghost" colorTheme="danger" shape="sharp" size="small" fontWeight="normal">
-          <DeleteForever />
-          Slett
-        </ButtonV2>
-      </DropdownItem>
-    </DropdownContent>
-  </DropdownMenu>
-);