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

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -6,69 +6,56 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 import { ChevronRight, Home } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 import Breadcrumb from "./Breadcrumb";
 import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
-interface ThemeProps {
-  light: boolean | undefined;
-}
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    color: "inherit",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
+    _focusVisible: {
+      textDecoration: "none",
+    },
+  },
+});
 
-const StyledSeparator = styled.div<ThemeProps>`
-  ${fonts.sizes("14px")};
-  margin: 0 ${spacing.small};
-  user-select: none;
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-  ${mq.range({ until: breakpoints.tablet })} {
-    display: none;
-  }
-`;
+const StyledChevronRight = styled(ChevronRight, {
+  base: {
+    tabletDown: {
+      display: "none",
+    },
+  },
+});
 
-const StyledIconSafeLink = styled(SafeLink)`
-  box-shadow: none;
-  border-bottom: none;
-`;
-const StyledHome = styled(Home)<ThemeProps>`
-  width: 20px;
-  height: 20px;
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-`;
-const StyledRightChevron = styled(ChevronRight)<ThemeProps>`
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-  margin: ${spacing.xxsmall};
-`;
-const StyledSpan = styled.span<ThemeProps>`
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-`;
-const StyledSafeLink = styled(SafeLink)<ThemeProps>`
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-`;
+const IconSafeLink = styled(SafeLink, {
+  base: {
+    color: "inherit",
+  },
+});
 
 interface Props {
   items: SimpleBreadcrumbItem[];
-  light?: boolean;
 }
 
-const HomeBreadcrumb = ({ items, light }: Props) => {
+const HomeBreadcrumb = ({ items }: Props) => {
   const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
     if (item.index === totalCount - 1) {
-      return <StyledSpan light={light}>{item.name}</StyledSpan>;
+      return <span>{item.name}</span>;
     }
     if (item.index === 0 && typeof item.name === "string") {
       return (
-        <StyledIconSafeLink aria-label={item.name} to={item.to}>
-          <StyledHome title={item.name} light={light} />
-        </StyledIconSafeLink>
+        <IconSafeLink aria-label={item.name} to={item.to}>
+          <Home title={item.name} />
+        </IconSafeLink>
       );
     }
-    return (
-      <StyledSafeLink light={light} to={item.to}>
-        {item.name}
-      </StyledSafeLink>
-    );
+    return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;
   };
 
   const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
@@ -76,9 +63,9 @@ const HomeBreadcrumb = ({ items, light }: Props) => {
       return null;
     }
     if (item.index === 0) {
-      return <StyledSeparator light={light}>|</StyledSeparator>;
+      return <StyledChevronRight />;
     }
-    return <StyledRightChevron light={light} />;
+    return <ChevronRight />;
   };
 
   return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;

package/src/ContactBlock/{Contactblock.stories.tsx → ContactBlock.stories.tsx}

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -7,7 +7,7 @@
  */
 
 import { Meta, StoryFn } from "@storybook/react";
-import ContactBlock from "./ContactBlock";
+import { ContactBlock } from "./ContactBlock";
 
 export default {
   title: "Components/Contact block",
@@ -76,8 +76,7 @@ export default {
       "Sigurd har variert ledererfaring fra utdanningssektoren, både fra videregående skole, nasjonalt senter og fra universitets/høgskolesektoren. Ansvarsområdene dekker bl.a. utdanning/opplæring/studiekvalitet, økonomi, HR, stratgi og IT-utvikling/-drift.",
     name: "Sigurd Trageton",
     email: "sigurd@ndla.no",
-    blobColor: "green",
-    blob: "pointy",
+    backgroundColor: "strong",
   },
 } as Meta<typeof ContactBlock>;
 

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