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

package/src/ContactBlock/ContactBlock.tsx

@@ -1,233 +1,199 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * Copyright (c) 2024-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 } from "react";
 import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { spacing, fonts, colors, mq, breakpoints, misc } from "@ndla/core";
-import { BlobPointy as UnstyledBlobPointy, BlobRound as UnstyledBlobRound } from "@ndla/icons/common";
-import { COPYRIGHTED, getLicenseByAbbreviation } from "@ndla/licenses";
-import { Image } from "@ndla/primitives";
-import { IAuthor, IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
-import { CanonicalUrlFuncs } from "../Embed";
-import { errorSvgSrc } from "../Embed/ImageEmbed";
-import { LicenseLink } from "../LicenseByline/LicenseLink";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { SystemStyleObject } from "@ndla/styled-system/types";
+import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
+
+export type ContactBlockBackground = "strong" | "moderate" | "subtle";
+
+const BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {
+  strong: { _before: { backgroundColor: "surface.brand.3" } },
+  moderate: { _before: { backgroundColor: "surface.brand.3.moderate" } },
+  subtle: { _before: { backgroundColor: "surface.brand.3.subtle" } },
+};
 
-const BLOB_WIDTH = 90;
+export const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];
+
+const StyledWrapper = styled("div", {
+  base: {
+    display: "flex",
+    maxWidth: "744px",
+    minWidth: "surface.xxsmall",
+    padding: "medium",
+    alignItems: "center",
+    justifyContent: "space-between",
+    boxShadow: "full",
+    border: "1px solid",
+    gap: "medium",
+    position: "relative",
+    borderColor: "stroke.default",
+    borderRadius: "xsmall",
+    overflow: "hidden",
+    background: "surface.default",
+    flexDirection: "column-reverse",
+    tablet: {
+      alignItems: "unset",
+      flexDirection: "row",
+    },
+  },
+});
+
+const EmailLink = styled("a", {
+  base: {
+    color: "text.default",
+    textDecoration: "underline",
+    _hover: { textDecoration: "none" },
+    _focusVisible: { textDecoration: "none" },
+  },
+});
+
+const HeaderWrapper = styled("div", {
+  base: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: "3xsmall",
+    zIndex: "base",
+    _before: {
+      content: '""',
+      position: "absolute",
+      top: "-60px",
+      left: "-50px",
+      right: "0",
+      bottom: "0",
+      height: "calc(100% + 50px)",
+      width: "surface.3xlarge",
+      transform: "rotate(-4deg)",
+      zIndex: "hide",
+    },
+  },
+  variants: {
+    variant: BackgroundVariant,
+    imageExists: {
+      true: {
+        tabletDown: {
+          _before: {
+            display: "none",
+          },
+        },
+      },
+    },
+  },
+});
+
+const ImageWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "xxsmall",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    zIndex: "base",
+    tabletDown: {
+      _before: {
+        content: '""',
+        position: "absolute",
+        top: "-50px",
+        left: "-50px",
+        right: "0",
+        bottom: "0",
+        height: "surface.xxsmall",
+        width: "surface.3xlarge",
+        transform: "rotate(-4deg)",
+        zIndex: "hide",
+      },
+    },
+  },
+  variants: {
+    variant: BackgroundVariant,
+  },
+});
+
+const StyledImage = styled("img", {
+  base: {
+    borderRadius: "xsmall",
+    width: "surface.xsmall",
+    height: "surface.xsmall",
+    objectFit: "cover",
+  },
+});
+
+const ContentWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium",
+    flex: "1",
+    width: "100%",
+  },
+});
+
+const StyledDescription = styled(Text, {
+  base: {
+    fontFamily: "serif",
+  },
+});
 
 interface Props {
   image?: IImageMetaInformationV3;
   jobTitle: string;
   description: string;
-  blobColor?: "pink" | "green";
-  blob?: "pointy" | "round";
+  backgroundColor?: ContactBlockBackground;
   imageWidth?: number;
   name: string;
   email: string;
   embedAlt?: string;
   lang?: string;
-  imageCanonicalUrl?: CanonicalUrlFuncs["image"];
-}
-const BlockWrapper = styled.div`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  padding: 0 0 ${spacing.medium} ${spacing.medium};
-  font-family: ${fonts.sans};
-  border-radius: ${misc.borderRadius};
-  border: 1px solid ${colors.brand.lighter};
-  background-color: ${colors.white};
-  & ~ & {
-    margin-top: ${spacing.medium};
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    max-width: 773px;
-    flex-direction: row;
-    padding: 0 0 ${spacing.medium} ${spacing.medium};
-    gap: ${spacing.nsmall};
-  }
-`;
-
-const StyledHeader = styled.div`
-  ${fonts.sizes("22px", "30px")};
-  font-weight: ${fonts.weight.bold};
-  margin: 0 0 ${spacing.xsmall} 0;
-  padding-top: ${spacing.medium};
-`;
-
-const StyledText = styled.div`
-  display: flex;
-  ${fonts.sizes("16px", "26px")};
-  overflow-wrap: anywhere;
-  color: ${colors.text.light};
-  gap: ${spacing.xxsmall};
-`;
-
-const EmailLink = styled.a`
-  color: ${colors.text.light};
-  text-decoration-color: ${colors.text.light};
-  text-decoration-style: solid;
-  text-decoration: underline;
-  box-shadow: unset;
-`;
-
-const SummaryBlock = styled.p`
-  font-family: ${fonts.sans};
-  padding: 0;
-  max-width: calc(100% - (${BLOB_WIDTH}px / 2));
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding-top: 0;
-  }
-`;
-
-const InfoWrapper = styled.div`
-  max-width: calc(100% - ${BLOB_WIDTH}px);
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  overflow: hidden;
-  justify-content: space-between;
-`;
-
-const BlobWrapper = styled.div`
-  height: 180px;
-  width: ${BLOB_WIDTH}px;
-  position: absolute;
-  overflow: hidden;
-  right: 0px;
-`;
-
-const ImageWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.xsmall};
-  ${fonts.sizes("16px", "26px")};
-  padding: ${spacing.medium} ${spacing.medium} 0 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding-right: 0;
-  }
-`;
-
-const blobStyling = css`
-  width: 165px;
-  height: 180px;
-  transform: translate(10%, 0);
-  color: ${colors.support.redLight};
-  &[data-green="true"] {
-    color: ${colors.support.greenLight};
-  }
-`;
-
-const BlobPointy = styled(UnstyledBlobPointy)`
-  ${blobStyling}
-`;
-
-const BlobRound = styled(UnstyledBlobRound)`
-  ${blobStyling}
-`;
-const Email = styled.div`
-  white-space: nowrap;
-`;
-
-const ContentWrapper = styled.div`
-  width: 100%;
-`;
-
-const StyledImage = styled(Image)`
-  object-fit: cover;
-`;
-
-interface LinkWrapperProps {
-  src?: string;
-  children: ReactNode;
 }
 
-const StyledLink = styled.a`
-  text-decoration: none;
-`;
-
-const LinkWrapper = ({ src, children }: LinkWrapperProps) => {
-  if (src) {
-    return (
-      <StyledLink target="_blank" href={src} rel="noopener noreferrer">
-        {children}
-      </StyledLink>
-    );
-  }
-  return children;
-};
-
-const ContactBlock = ({
+export const ContactBlock = ({
   image,
   jobTitle,
   description,
   name,
   email,
   embedAlt,
-  blobColor = "green",
-  blob = "pointy",
-  imageCanonicalUrl,
   lang,
+  backgroundColor = "strong",
 }: Props) => {
-  const { t, i18n } = useTranslation();
-  const isGreenBlob = blobColor === "green";
-  const Blob = blob === "pointy" ? BlobPointy : BlobRound;
-  const authors = [image?.copyright.processors, image?.copyright.creators, image?.copyright.rightsholders]
-    .filter((authors) => !!authors?.length)
-    .reduce<IAuthor[]>((acc, val) => acc.concat(val!), []);
-  const license = image?.copyright
-    ? getLicenseByAbbreviation(image.copyright.license.license, i18n.language)
-    : undefined;
-
-  const isCopyrighted = image?.copyright.license.license.toLowerCase() === COPYRIGHTED;
-
+  const { t } = useTranslation();
   return (
-    <BlockWrapper>
-      <ImageWrapper>
-        {image ? (
-          <>
-            <LinkWrapper src={!isCopyrighted && image ? imageCanonicalUrl?.(image) : undefined}>
-              <StyledImage
-                alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}
-                src={image.image.imageUrl}
-                sizes={`(min-width: ${breakpoints.tablet}) 240px, (max-width: ${breakpoints.tablet}) 500px`}
-              />
-            </LinkWrapper>
-            <span>
-              {`${t("embed.type.image")}: ${authors.map((author) => `${author?.name}`).join(", ")} `}
-              {!!license && <LicenseLink license={license} />}
-            </span>
-          </>
-        ) : (
-          <img alt={t("image.error.url")} src={errorSvgSrc} />
-        )}
-      </ImageWrapper>
+    <StyledWrapper>
       <ContentWrapper>
-        <TextWrapper>
-          <InfoWrapper>
-            <StyledHeader lang={lang}>{name}</StyledHeader>
-            <StyledText lang={lang}>{jobTitle}</StyledText>
-            <StyledText>
-              <Email>{`${t("email")}:`}</Email>
-              <EmailLink href={`mailto:${email}`}>{email}</EmailLink>
-            </StyledText>
-          </InfoWrapper>
-          <BlobWrapper>
-            <Blob data-green={isGreenBlob} />
-          </BlobWrapper>
-        </TextWrapper>
-        <SummaryBlock>{description}</SummaryBlock>
+        <HeaderWrapper variant={backgroundColor} imageExists={!!image}>
+          {/* TODO: The font in the design specified `Source Sans Pro` and this is the default `Satoshi` */}
+          <Text lang={lang} fontWeight="bold" textStyle="heading.small">
+            {name}
+          </Text>
+          <Text lang={lang}>{jobTitle}</Text>
+          <Text>
+            {`${t("email")}: `}
+            <EmailLink href={`mailto:${email}`}>{email}</EmailLink>
+          </Text>
+        </HeaderWrapper>
+        <StyledDescription textStyle="body.large">{description}</StyledDescription>
       </ContentWrapper>
-    </BlockWrapper>
+      {image && (
+        <ImageWrapper variant={backgroundColor}>
+          <StyledImage
+            alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}
+            src={image.image.imageUrl}
+            width={300}
+            height={300}
+          />
+          {/* TODO: The font in the design specified `Source Sans Pro` and this is the default `Satoshi` */}
+          <LicenseContainerContent type="image" copyright={image.copyright} />
+        </ImageWrapper>
+      )}
+    </StyledWrapper>
   );
 };
-
-export default ContactBlock;

package/src/ContactBlock/index.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * Copyright (c) 2024-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 ContactBlock from "./ContactBlock";
 
-export default ContactBlock;
+export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
+export type { ContactBlockBackground } from "./ContactBlock";

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -6,12 +6,9 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { CSSProperties, ComponentProps, useMemo } from "react";
+import { CSSProperties, ComponentPropsWithoutRef, useMemo } from "react";
 
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, mq } from "@ndla/core";
+import { colors } from "@ndla/core";
 import { Minus, MenuBook } from "@ndla/icons/action";
 import { Audio } from "@ndla/icons/common";
 import {
@@ -24,12 +21,12 @@ import {
   SubjectMaterial,
   TasksAndActivities,
 } from "@ndla/icons/contentType";
-
 import { Concept, Media, Video } from "@ndla/icons/editor";
+import { styled } from "@ndla/styled-system/jsx";
 
 import * as contentTypes from "../model/ContentType";
 
-interface Props extends ComponentProps<"div"> {
+interface Props extends ComponentPropsWithoutRef<"div"> {
   size?: "xx-small" | "x-small" | "small" | "large";
   type: string;
   title?: string;
@@ -38,62 +35,74 @@ interface Props extends ComponentProps<"div"> {
   className?: string;
 }
 
-const sizes = {
-  "xx-small": css`
-    width: 20px;
-    height: 20px;
-    border: 1px solid;
-    svg {
-      width: 10px;
-      height: 10x;
-    }
-  `,
-  "x-small": css`
-    width: 20px;
-    height: 20px;
-    border: 1px solid;
-    ${mq.range({ from: breakpoints.tablet })} {
-      height: 26px;
-      width: 26px;
-    }
-    svg {
-      width: 10px;
-      height: 10x;
-      ${mq.range({ from: breakpoints.tablet })} {
-        width: 12px;
-        height: 12px;
-      }
-    }
-  `,
-  small: "",
-  large: css`
-    width: 50px;
-    height: 50px;
-    svg {
-      width: 25px;
-      height: 25px;
-    }
-  `,
-} as const;
-
-const BaseContentTypeBadge = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  width: 34px;
-  height: 34px;
-  color: var(--icon-color);
-`;
-
-const borderStyle = css`
-  border: 2px solid;
-  border-color: var(--icon-color);
-`;
-
-const backgroundStyle = css`
-  background-color: var(--background-color);
-`;
+const StyledContentTypeBadge = styled("div", {
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "100%",
+    color: "var(--icon-color)",
+  },
+  defaultVariants: {
+    size: "small",
+    border: true,
+    background: false,
+  },
+  variants: {
+    size: {
+      "xx-small": {
+        width: "20px",
+        height: "20px",
+        border: "1px solid",
+        "& svg": {
+          width: "10px",
+          height: "10px",
+        },
+      },
+      "x-small": {
+        width: "20px",
+        height: "20px",
+        border: "1px solid",
+        tablet: {
+          height: "26px",
+          width: "26px",
+        },
+        "& svg": {
+          width: "10px",
+          height: "10px",
+          tablet: {
+            width: "12px",
+            height: "12px",
+          },
+        },
+      },
+      small: {
+        width: "34px",
+        height: "34px",
+      },
+      large: {
+        width: "50px",
+        height: "50px",
+        "& svg": {
+          width: "25px",
+          height: "25px",
+        },
+      },
+    },
+    border: {
+      true: {
+        border: "2px solid",
+        borderColor: "var(--icon-color)",
+      },
+      false: {},
+    },
+    background: {
+      true: {
+        backgroundColor: "var(--background-color)",
+      },
+    },
+  },
+});
 
 const iconMap = {
   [contentTypes.SUBJECT_MATERIAL]: {
@@ -185,21 +194,12 @@ export const ContentTypeBadge = ({
     return { Icon: fromMap.icon, style };
   }, [type]);
 
-  const cssStyles = useMemo(() => {
-    const styles = [sizes[size]];
-    if (background) {
-      styles.push(backgroundStyle);
-    }
-    if (border) {
-      styles.push(borderStyle);
-    }
-    return styles;
-  }, [background, border, size]);
-
   return (
-    <BaseContentTypeBadge
-      css={cssStyles}
+    <StyledContentTypeBadge
       title={title}
+      background={background}
+      size={size}
+      border={border}
       style={style}
       aria-label={title}
       className={className}
@@ -208,7 +208,7 @@ export const ContentTypeBadge = ({
       {...rest}
     >
       <Icon />
-    </BaseContentTypeBadge>
+    </StyledContentTypeBadge>
   );
 };
 

package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -15,7 +15,7 @@ export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
   contentType: ContentType | undefined;
 }
 
-type ContentType =
+export type ContentType =
   | typeof contentTypes.SUBJECT_MATERIAL
   | typeof contentTypes.TASKS_AND_ACTIVITIES
   | typeof contentTypes.ASSESSMENT_RESOURCES
@@ -30,6 +30,7 @@ type ContentType =
   | typeof contentTypes.AUDIO
   | typeof contentTypes.VIDEO
   | typeof contentTypes.MISSING
+  | typeof contentTypes.PODCAST
   // This allows for us to fallback to string without getting a ts error, while still keeping intellisense
   | (string & {});
 
@@ -49,6 +50,7 @@ export const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {
   // TODO: Verify resourceEmbedTypeMapping colors
   [contentTypes.IMAGE]: "brand1",
   [contentTypes.AUDIO]: "brand1",
+  [contentTypes.PODCAST]: "brand1",
   [contentTypes.VIDEO]: "brand1",
   [contentTypes.MISSING]: "neutral",
 };