@ndla/ui 56.0.25-alpha.0 → 56.0.27-alpha.0

package/src/CampaignBlock/CampaignBlock.tsx

@@ -34,6 +34,14 @@ interface Props {
   path?: string;
 }
 
+const Wrapper = styled("div", {
+  base: {
+    width: "100%",
+    height: "100%",
+    containerType: "inline-size",
+  },
+});
+
 const Container = styled("div", {
   base: {
     display: "grid",
@@ -49,14 +57,24 @@ const Container = styled("div", {
   variants: {
     imageSide: {
       left: {
-        tabletWide: {
+        "@/tablet": {
           gridTemplateColumns: "minmax(230px, 455px) auto", //required for campaign block in myNdla
         },
+        "@supports not (container-type: inline-size)": {
+          tabletWide: {
+            gridTemplateColumns: "minmax(230px, 455px) auto",
+          },
+        },
       },
       right: {
-        tabletWide: {
+        "@/tablet": {
           gridTemplateColumns: "auto minmax(230px, 455px)", //required for campaign block in myNdla
         },
+        "@supports not (container-type: inline-size)": {
+          tabletWide: {
+            gridTemplateColumns: "auto minmax(230px, 455px)",
+          },
+        },
       },
     },
   },
@@ -93,12 +111,17 @@ const StyledImg = styled("img", {
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    tablet: {
-      height: "265px",
-    },
-    tabletWide: {
+    "@/tablet": {
       height: "340px",
     },
+    "@supports not (container-type: inline-size)": {
+      tablet: {
+        height: "265px",
+      },
+      tabletWide: {
+        height: "340px",
+      },
+    },
   },
 });
 
@@ -112,13 +135,12 @@ const ContentWrapper = styled("div", {
     justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium",
-    minWidth: "270px", //required for campaign block in myNdla
   },
 });
 
 const StyledText = styled(Text, {
   base: {
-    tabletWide: {
+    tablet: {
       display: "block",
       overflow: "hidden",
       position: "relative",
@@ -158,26 +180,28 @@ const CampaignBlock = ({
   const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
   const HeaderComponent = url?.url ? LinkHeader : Text;
   return (
-    <Container className={className} data-embed-type="campaign-block" imageSide={imageSide}>
-      {imageSide === "left" && imageComponent}
-      <ContentWrapper>
-        <MaybeLinkText url={url?.url} path={path}>
-          <HeaderComponent asChild consumeCss textStyle="heading.small">
-            <InternalHeading>{parse(title)}</InternalHeading>
-          </HeaderComponent>
-        </MaybeLinkText>
-        <StyledText textStyle="body.xlarge">{parse(description)}</StyledText>
-        {!!url?.url && (
-          <MaybeLinkText url={url.url} path={path}>
-            <LinkText textStyle="body.medium">
-              {parse(url.text ?? "")}
-              <ArrowRightLine />
-            </LinkText>
+    <Wrapper>
+      <Container className={className} data-embed-type="campaign-block" imageSide={imageSide}>
+        {imageSide === "left" && imageComponent}
+        <ContentWrapper>
+          <MaybeLinkText url={url?.url} path={path}>
+            <HeaderComponent asChild consumeCss textStyle="heading.small">
+              <InternalHeading>{parse(title)}</InternalHeading>
+            </HeaderComponent>
           </MaybeLinkText>
-        )}
-      </ContentWrapper>
-      {imageSide !== "left" && imageComponent}
-    </Container>
+          <StyledText textStyle="body.xlarge">{parse(description)}</StyledText>
+          {!!url?.url && (
+            <MaybeLinkText url={url.url} path={path}>
+              <LinkText textStyle="body.medium">
+                {parse(url.text ?? "")}
+                <ArrowRightLine />
+              </LinkText>
+            </MaybeLinkText>
+          )}
+        </ContentWrapper>
+        {imageSide !== "left" && imageComponent}
+      </Container>
+    </Wrapper>
   );
 };
 

package/src/ContentTypeHero/ContentTypeHero.tsx

@@ -22,7 +22,7 @@ export const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {
   [contentTypes.LEARNING_PATH]: "primary",
   [contentTypes.TOPIC]: "neutral",
   [contentTypes.MULTIDISCIPLINARY]: "primary",
-  [contentTypes.CONCEPT]: "brand1Subtle",
+  [contentTypes.CONCEPT]: "brand1Moderate",
   [contentTypes.EXTERNAL]: "primary",
   [contentTypes.IMAGE]: "primary",
   [contentTypes.AUDIO]: "primary",

package/src/Embed/BrightcoveEmbed.tsx

@@ -31,6 +31,7 @@ const LinkedVideoButton = styled(Button, {
 
 const BrightcoveIframe = styled("iframe", {
   base: {
+    border: 0,
     height: "auto",
     width: "100%",
   },
@@ -86,9 +87,8 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
           ref={iframeRef}
           title={embedData.alt ?? fallbackTitle}
           aria-label={embedData.alt ?? fallbackTitle}
-          frameBorder="0"
           {...getIframeProps(embedData, [])}
-          allowFullScreen
+          allow="fullscreen; encrypted-media"
         />
       </EmbedErrorPlaceholder>
     );
@@ -112,9 +112,8 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
           className="original"
           title={embedData.alt ?? data.name ?? fallbackTitle}
           aria-label={embedData.alt ?? data.name ?? fallbackTitle}
-          frameBorder="0"
           {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}
-          allowFullScreen
+          allow="fullscreen; encrypted-media"
         />
       </div>
       <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription}>

package/src/Embed/ImageEmbed.tsx

@@ -183,6 +183,9 @@ const ExpandButton = styled(
         transitionDuration: "normal",
         transitionTimingFunction: "ease-out",
       },
+      tabletDown: {
+        display: "none",
+      },
     },
   },
   { defaultProps: { type: "button" } },
@@ -221,11 +224,13 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
 
   const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
 
+  const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
+
   // TODO: Check how this works with `children`. Will only be important for ED
   return (
     <StyledFigure
       float={figureProps?.float}
-      size={imageSizes ? "full" : figureProps?.size ?? "medium"}
+      size={imageSizes ? "full" : figureSize}
       data-embed-type="image"
       {...licenseProps}
     >
@@ -242,7 +247,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
           onClick={figureProps?.float ? toggleImageSize : undefined}
           variant="rounded"
         />
-        {!!embedData.align && (
+        {(embedData.align === "right" || embedData.align === "left") && (
           <ExpandButton
             aria-label={t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`)}
             onClick={toggleImageSize}
@@ -252,14 +257,14 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
           </ExpandButton>
         )}
       </ImageWrapper>
-      {embedData.hideByline === "true" ? null : (
-        <EmbedByline
-          type="image"
-          copyright={data.copyright}
-          description={embedData.hideCaption === "true" ? "" : parsedDescription}
-          visibleAlt={previewAlt ? embed.embedData.alt : ""}
-        />
-      )}
+      <EmbedByline
+        type="image"
+        copyright={data.copyright}
+        description={parsedDescription}
+        hideDescription={embedData.hideCaption === "true"}
+        hideCopyright={embedData.hideByline === "true"}
+        visibleAlt={previewAlt ? embed.embedData.alt : ""}
+      />
     </StyledFigure>
   );
 };

package/src/LicenseByline/EmbedByline.tsx

@@ -24,6 +24,8 @@ interface BaseProps {
   children?: ReactNode;
   visibleAlt?: string;
   error?: true | false;
+  hideDescription?: boolean;
+  hideCopyright?: boolean;
 }
 
 export interface EmbedBylineErrorProps extends BaseProps {
@@ -78,6 +80,7 @@ const BylineWrapper = styled("figcaption", {
     paddingBlock: "xsmall",
     background: "surface.default",
     textStyle: "label.medium",
+    color: "text.subtle",
   },
 });
 
@@ -114,7 +117,15 @@ const BaseDescription = styled("div", {
   },
 });
 
-export const EmbedByline = ({ type, description, children, visibleAlt, ...props }: Props) => {
+export const EmbedByline = ({
+  type,
+  description,
+  children,
+  visibleAlt,
+  hideCopyright,
+  hideDescription,
+  ...props
+}: Props) => {
   const { t } = useTranslation();
 
   if (props.error) {
@@ -132,14 +143,18 @@ export const EmbedByline = ({ type, description, children, visibleAlt, ...props
   }
 
   const { copyright } = props;
+  const bylineDescription = hideDescription ? "" : description;
 
   return (
     <>
       <BylineWrapper>
         <div>
-          <LicenseContainerContent type={type} copyright={copyright}>
-            {description}
-          </LicenseContainerContent>
+          {hideCopyright && bylineDescription}
+          {!hideCopyright && (
+            <LicenseContainerContent type={type} copyright={copyright}>
+              {bylineDescription}
+            </LicenseContainerContent>
+          )}
           {children}
         </div>
       </BylineWrapper>

package/src/LicenseByline/LicenseLink.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 const StyledSafeLink = styled(SafeLink, {
   base: {
-    color: "primary",
+    color: "text.link",
     textDecoration: "underline",
     whiteSpace: "nowrap",
     _hover: {