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

package/src/LicenseByline/EmbedByline.tsx

@@ -6,23 +6,20 @@
  *
  */
 
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, fonts, misc, spacing } from "@ndla/core";
 import { WarningOutline } from "@ndla/icons/common";
 import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
+import { Button, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { ICopyright as ArticleCopyright } from "@ndla/types-backend/article-api";
 import { ICopyright as AudioCopyright } from "@ndla/types-backend/audio-api";
 import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import { ICopyright as ImageCopyright } from "@ndla/types-backend/image-api";
 import { BrightcoveCopyright } from "@ndla/types-embed";
-import LicenseDescription from "./LicenseDescription";
-import LicenseLink from "./LicenseLink";
+import { LicenseLink } from "./LicenseLink";
 
 interface BaseProps {
-  topRounded?: boolean;
-  bottomRounded?: boolean;
   description?: ReactNode;
   children?: ReactNode;
   visibleAlt?: string;
@@ -74,49 +71,63 @@ export type EmbedBylineTypeProps =
 
 type Props = EmbedBylineTypeProps | EmbedBylineErrorProps;
 
-const BylineWrapper = styled.figcaption`
-  display: flex;
-  flex-direction: column;
-  font-family: ${fonts.sans};
-  ${fonts.sizes("16px", "26px")};
-  padding: ${spacing.small} 0;
-  background-color: ${colors.white};
-  &[data-top-rounded="true"] {
-    border-top-right-radius: ${misc.borderRadius};
-    border-top-left-radius: ${misc.borderRadius};
-  }
-
-  &[data-bottom-rounded="true"] {
-    border-bottom-right-radius: ${misc.borderRadius};
-    border-bottom-left-radius: ${misc.borderRadius};
-  }
-
-  &[data-error="true"] {
-    border: none;
-    background-color: ${colors.support.redLightest};
-    padding: ${spacing.nsmall} ${spacing.normal};
-    ${fonts.sizes("18px", "24px")};
-  }
-`;
-
-const StyledSpan = styled.span`
-  font-style: italic;
-  color: grey;
-  font-family: ${fonts.sans};
-  ${fonts.sizes("16px", "26px")};
-`;
-
-const EmbedByline = ({ type, topRounded, bottomRounded, description, children, visibleAlt, ...props }: Props) => {
+const BylineWrapper = styled("figcaption", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    paddingBlock: "xsmall",
+    background: "surface.default",
+    textStyle: "label.medium",
+  },
+});
+
+const ErrorBylineWrapper = styled(BylineWrapper, {
+  base: {
+    border: "1px solid",
+    borderColor: "stroke.error",
+    borderRadius: "xsmall",
+    background: "surface.dangerSubtle",
+    paddingInline: "medium",
+    paddingBlock: "medium",
+  },
+});
+
+const StyledText = styled(Text, {
+  base: {
+    fontStyle: "italic",
+  },
+});
+
+const ContentWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "xsmall",
+    alignItems: "center",
+    textStyle: "label.medium",
+  },
+});
+
+const BaseDescription = styled("div", {
+  base: {
+    display: "inline-flex",
+    whiteSpace: "pre-wrap",
+  },
+});
+
+export const EmbedByline = ({ type, description, children, visibleAlt, ...props }: Props) => {
   const { t } = useTranslation();
 
   if (props.error) {
     const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
     return (
-      <BylineWrapper data-top-rounded={topRounded} data-bottom-rounded={bottomRounded} data-error={true}>
-        <LicenseDescription warningByline={props.error} icon={<WarningOutline />}>
-          {t("embed.embedError", { type: typeString })}
-        </LicenseDescription>
-      </BylineWrapper>
+      <ErrorBylineWrapper>
+        <ContentWrapper>
+          <WarningOutline />
+          <BaseDescription>
+            <span>{t("embed.embedError", { type: typeString })}</span>
+          </BaseDescription>
+        </ContentWrapper>
+      </ErrorBylineWrapper>
     );
   }
 
@@ -132,7 +143,11 @@ const EmbedByline = ({ type, topRounded, bottomRounded, description, children, v
           {children}
         </div>
       </BylineWrapper>
-      {visibleAlt ? <StyledSpan>{`Alt: ${visibleAlt}`}</StyledSpan> : null}
+      {visibleAlt ? (
+        <StyledText color="text.subtle" textStyle="label.medium" asChild consumeCss>
+          <span>{`Alt: ${visibleAlt}`}</span>
+        </StyledText>
+      ) : null}
     </>
   );
 };
@@ -143,16 +158,79 @@ interface LicenseContainerProps {
   type: Props["type"];
 }
 
+const StyledDescription = styled(BaseDescription, {
+  base: {
+    mobileWideDown: {
+      display: "grid",
+      gridTemplateColumns: "1fr auto",
+      alignItems: "center",
+      overflow: "hidden",
+      _open: {
+        display: "inline",
+      },
+    },
+  },
+});
+
+const TextContent = styled("span", {
+  base: {
+    mobileWideDown: {
+      whiteSpace: "nowrap",
+      maxHeight: "large",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      transitionProperty: "max-height",
+      transitionDuration: "slow",
+      transitionTimingFunction: "ease-in",
+      _open: {
+        whiteSpace: "pre-wrap",
+        maxHeight: "none",
+      },
+    },
+  },
+});
+
+const StyledButton = styled(Button, {
+  base: {
+    mobileWide: {
+      display: "none",
+    },
+  },
+});
+
+interface LicenseDescriptionProps {
+  children?: ReactNode;
+}
+
+const LicenseDescription = ({ children }: LicenseDescriptionProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const open = isOpen ? { "data-open": "" } : {};
+  const { t } = useTranslation();
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <ContentWrapper>
+      <StyledDescription {...open}>
+        <TextContent {...open}>{children}</TextContent>
+        <StyledButton variant="link" size="small" onClick={handleToggle}>
+          {isOpen ? `${t("audio.readLessDescriptionLabel")}` : `${t("audio.readMoreDescriptionLabel")}`}
+        </StyledButton>
+      </StyledDescription>
+    </ContentWrapper>
+  );
+};
+
 export const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {
   const { t, i18n } = useTranslation();
   const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
 
-  const Component = children ? LicenseDescription : "span";
-
-  return (
-    <Component>
+  const content = (
+    <>
       {children}
       {` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`}
       {captionAuthors.map((author) => author.name).join(", ")}
@@ -162,8 +240,16 @@ export const LicenseContainerContent = ({ children, copyright, type }: LicenseCo
           <LicenseLink license={license} />
         </>
       ) : null}
-    </Component>
+    </>
   );
-};
 
-export default EmbedByline;
+  if (children) {
+    return <LicenseDescription>{content}</LicenseDescription>;
+  }
+
+  return (
+    <Text textStyle="label.medium" asChild consumeCss>
+      <span>{content}</span>
+    </Text>
+  );
+};

package/src/LicenseByline/LicenseLink.tsx

@@ -6,27 +6,29 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
 import { LicenseLocaleType } from "@ndla/licenses";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props {
   license: LicenseLocaleType;
 }
 
-const StyledSafeLink = styled(SafeLink)`
-  color: ${colors.brand.primary};
-  text-decoration: underline;
-  white-space: nowrap;
-  box-shadow: none;
-  &:hover,
-  &:focus-within {
-    text-decoration: none;
-  }
-`;
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    color: "primary",
+    textDecoration: "underline",
+    whiteSpace: "nowrap",
+    _hover: {
+      textDecoration: "none",
+    },
+    _focusWithin: {
+      textDecoration: "none",
+    },
+  },
+});
 
-const LicenseLink = ({ license }: Props) => {
+export const LicenseLink = ({ license }: Props) => {
   if (license.abbreviation === "unknown") {
     return null;
   }
@@ -39,5 +41,3 @@ const LicenseLink = ({ license }: Props) => {
   }
   return <span>{license.abbreviation}</span>;
 };
-
-export default LicenseLink;

package/src/LicenseByline/index.tsx

@@ -6,5 +6,5 @@
  *
  */
 
-export { default as EmbedByline } from "./EmbedByline";
-export { default as LicenseLink } from "./LicenseLink";
+export { EmbedByline } from "./EmbedByline";
+export { LicenseLink } from "./LicenseLink";

package/src/LinkBlock/LinkBlock.stories.tsx

@@ -14,19 +14,17 @@ export default {
   title: "Components/Link Block",
   component: LinkBlock,
   tags: ["autodocs"],
-  args: {},
+  args: {
+    title: "Redaksjonell <em>medarbeider</em> i faget spansk 2",
+    articleLanguage: "nb",
+    date: "05. mars 2023",
+    url: "",
+  },
 } as Meta<typeof LinkBlock>;
 
-const args = {
-  title: "Redaksjonell <em>medarbeider</em> i faget spansk 2",
-  articleLanguage: "nb",
-  date: "05. mars 2023",
-  url: "",
-};
+export const AnnouncementExample: StoryObj<typeof LinkBlock> = {};
 
-export const AnnouncementExample: StoryObj<typeof LinkBlock> = { args };
-
-export const LinkList: StoryFn<typeof LinkBlock> = () => (
+export const LinkList: StoryFn<typeof LinkBlock> = (args) => (
   <LinkBlockSection>
     <LinkBlock {...args} />
     <LinkBlock {...args} />

package/src/LinkBlock/LinkBlock.tsx

@@ -10,69 +10,64 @@ import { format } from "date-fns";
 import { enGB, nb, nn } from "date-fns/locale";
 import parse from "html-react-parser";
 import { useMemo } from "react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, spacing, mq } from "@ndla/core";
 import { Forward, CalendarEd } from "@ndla/icons/common";
+import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 import { LinkBlockEmbedData } from "@ndla/types-embed";
-import { Heading } from "@ndla/typography";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
-const StyledForward = styled(Forward)`
-  margin: 0 ${spacing.nsmall};
-  min-width: ${spacing.normal};
-  min-height: ${spacing.normal};
-`;
+const InfoWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+  },
+});
 
-const InfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-`;
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: "surface.default",
+    padding: "medium",
+    border: "1px solid",
+    // TODO: Check if this is correct. Not part of design. Also check if this should have border-radius.
+    borderColor: "stroke.default",
+    "& h3": {
+      textDecoration: "underline",
+    },
+    "& [data-forward]": {
+      transitionProperty: "width, height",
+      transitionTimingFunction: "ease-in-out",
+      transitionDuration: "fast",
+    },
+    _hover: {
+      "& h3": {
+        textDecoration: "none",
+      },
+      "& [data-forward]": {
+        width: "large",
+        height: "large",
+      },
+    },
+  },
+});
 
-const StyledSafeLink = styled(SafeLink)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: none;
-  color: inherit;
-  background-color: ${colors.white};
-  border: 1px solid ${colors.brand.lighter};
-  padding: ${spacing.normal};
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    &:hover {
-      & ${InfoWrapper} :first-child {
-        text-decoration: underline;
-      }
-      & ${StyledForward} {
-        width: 32px;
-        height: 32px;
-      }
-    }
-    &:focus-visible {
-      border: 2px solid ${colors.brand.dark};
-    }
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    & ${InfoWrapper} :first-child {
-      text-decoration: underline;
-    }
-    :active :first-child {
-      text-decoration: none;
-    }
-  }
-`;
+const StyledDateContainer = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "xxsmall",
+  },
+});
 
-const StyledDateContainer = styled.div`
-  display: flex;
-  align-items: center;
-  padding-top: ${spacing.xsmall};
-  gap: ${spacing.small};
-`;
-
-const StyledCalenderEd = styled(CalendarEd)`
-  color: ${colors.icon.iconBlue};
-`;
+const StyledCalendarEd = styled(CalendarEd, {
+  base: {
+    color: "icon.strong",
+  },
+});
 
 interface Props extends Omit<LinkBlockEmbedData, "resource"> {
   path?: string;
@@ -89,17 +84,17 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
   return (
     <StyledSafeLink to={href}>
       <InfoWrapper>
-        <Heading element="h3" margin="none" headingStyle="h3">
-          {parse(title)}
+        <Heading asChild consumeCss textStyle="title.medium">
+          <h3 data-heading>{parse(title)}</h3>
         </Heading>
         {date && (
           <StyledDateContainer>
-            <StyledCalenderEd />
+            <StyledCalendarEd />
             {formattedDate}
           </StyledDateContainer>
         )}
       </InfoWrapper>
-      <StyledForward />
+      <Forward data-forward />
     </StyledSafeLink>
   );
 };

package/src/LinkBlock/LinkBlockSection.tsx

@@ -7,23 +7,20 @@
  */
 
 import { Children, HTMLAttributes, ReactNode } from "react";
-import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
 }
 
-const StyledList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-  list-style: none;
-  padding: 0px;
-  li {
-    padding: 0px;
-  }
-`;
+const StyledList = styled("ul", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    listStyle: "none",
+  },
+});
 
 const LinkBlockSection = ({ children, ...rest }: Props) => {
   return (

package/src/Logo/Logo.stories.tsx

@@ -24,7 +24,6 @@ export default {
     inlineStories: true,
   },
   args: {
-    cssModifier: "large",
     name: true,
     label: "Nasjonal digital læringsarena",
   },

package/src/Logo/Logo.tsx

@@ -6,11 +6,7 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { useMemo } from "react";
-import { SerializedStyles, css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
 import { SafeLink } from "@ndla/safelink";
 import SvgLogo from "./SvgLogo";
 
@@ -24,8 +20,6 @@ interface Props {
       };
   label: string;
   locale?: string;
-  cssModifier?: string;
-  large?: boolean;
   name?: boolean;
   color?: string;
 }
@@ -39,29 +33,7 @@ const StyledLogoWrapper = styled.div`
   position: relative;
 `;
 
-const modifierStyles: Record<string, SerializedStyles> = {
-  large: css`
-    width: 287px;
-  `,
-  white: css`
-    svg {
-      fill: ${colors.white};
-    }
-  `,
-};
-
-export const Logo = ({ name = true, to, cssModifier, color, large = false, locale, label }: Props) => {
-  const modifiers = useMemo(() => {
-    const mods = [];
-    if (large) {
-      mods.push(modifierStyles.large);
-    }
-    if (cssModifier && modifierStyles[cssModifier]) {
-      mods.push(modifierStyles[cssModifier]);
-    }
-    return mods;
-  }, [large, cssModifier]);
-
+export const Logo = ({ name = true, to, color, locale, label }: Props) => {
   const logo = to ? (
     <SafeLink to={to} aria-label={label} title={label}>
       <SvgLogo name={name} color={color} locale={locale} />
@@ -69,7 +41,7 @@ export const Logo = ({ name = true, to, cssModifier, color, large = false, local
   ) : (
     <SvgLogo name={name} color={color} locale={locale} />
   );
-  return <StyledLogoWrapper css={modifiers}>{logo}</StyledLogoWrapper>;
+  return <StyledLogoWrapper>{logo}</StyledLogoWrapper>;
 };
 
 export default Logo;