@ndla/ui 56.0.15-alpha.0 → 56.0.16-alpha.0

package/lib/locale/messages-nb.js

@@ -1075,9 +1075,9 @@ const messages = {
         },
         fetchMore: "Hent flere svar",
         deleted: "Dette innlegget er slettet av forfatteren.",
-        upvote: "Stem opp",
+        upvote: "Liker",
         numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
-        removeUpvote: "Fjern stemme",
+        removeUpvote: "Slutt å like",
         reply: "Skriv et svar til {{ name }}"
       },
       flag: {

package/lib/locale/messages-nn.js

@@ -1075,9 +1075,9 @@ const messages = {
         },
         fetchMore: "Hent fleire svar",
         deleted: "Dette innlegget er sletta av forfatteren.",
-        upvote: "Stem opp",
+        upvote: "Liker",
         numberOfUpvotes: "{{ count }} personar har stemt opp denne.",
-        removeUpvote: "Fjern stemme",
+        removeUpvote: "Slutt å like",
         reply: "Skriv eit svar til {{ name }}"
       },
       flag: {

package/lib/locale/messages-se.js

@@ -1075,9 +1075,9 @@ const messages = {
         },
         fetchMore: "Hent flere svar",
         deleted: "Dette innlegget er slettet av forfatteren.",
-        upvote: "Stem opp",
+        upvote: "Liker",
         numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
-        removeUpvote: "Fjern stemme",
+        removeUpvote: "Slutt å like",
         reply: "Skriv et svar til {{ name }}"
       },
       flag: {

package/lib/locale/messages-sma.js

@@ -1075,9 +1075,9 @@ const messages = {
         },
         fetchMore: "Hent flere svar",
         deleted: "Dette innlegget er slettet av forfatteren.",
-        upvote: "Stem opp",
+        upvote: "Liker",
         numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
-        removeUpvote: "Fjern stemme",
+        removeUpvote: "Slutt å like",
         reply: "Skriv et svar til {{ name }}"
       },
       flag: {

package/lib/styles.css

@@ -85,34 +85,26 @@
 }
 }
 
-  .px_8\% {
-    padding-inline: 8%;
-}
-
-  .w_100\% {
-    width: 100%;
-}
-
-  .pbs_xsmall {
-    padding-block-start: var(--spacing-xsmall);
-}
-
-  .pbe_xsmall {
-    padding-block-end: var(--spacing-xsmall);
-}
-
-  .bg_surface\.default {
-    background: var(--colors-surface-default);
+  .bg_background\.default {
+    background: var(--colors-background-default);
 }
 
   .d_flex {
     display: flex;
 }
 
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
+}
+
   .c_text\.default {
     color: var(--colors-text-default);
 }
 
+  .w_100\% {
+    width: 100%;
+}
+
   .ov-wrap_break-word {
     overflow-wrap: break-word;
 }
@@ -121,26 +113,22 @@
     position: relative;
 }
 
-  .gap_xsmall {
-    gap: var(--spacing-xsmall);
-}
-
-  .pos_absolute {
-    position: absolute;
-}
-
   .gap_medium {
     gap: var(--spacing-medium);
 }
 
-  .gap_xxlarge {
-    gap: var(--spacing-xxlarge);
+  .pbs_xxlarge {
+    padding-block-start: var(--spacing-xxlarge);
 }
 
   .mbs_medium {
     margin-block-start: var(--spacing-medium);
 }
 
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
+}
+
   .bd-t_1px_solid {
     border-top: 1px solid;
 }
@@ -153,8 +141,8 @@
     padding-block: var(--spacing-xsmall);
 }
 
-  .pbs_xxlarge {
-    padding-block-start: var(--spacing-xxlarge);
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
 }
 
   .li-s_none {
@@ -218,10 +206,6 @@
     border-bottom-right-radius: var(--radii-xsmall);
 }
 
-  .bg_background\.default {
-    background: var(--colors-background-default);
-}
-
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -374,6 +358,10 @@
     padding: var(--spacing-medium);
 }
 
+  .bg_surface\.default {
+    background: var(--colors-surface-default);
+}
+
   .z_base {
     z-index: var(--z-index-base);
 }
@@ -426,6 +414,10 @@
     border: 2px solid;
 }
 
+  .pos_absolute {
+    position: absolute;
+}
+
   .op_0 {
     opacity: 0;
 }
@@ -635,14 +627,6 @@
     align-items: flex-start;
 }
 
-  .right_8\% {
-    right: 8%;
-}
-
-  .top_xsmall {
-    top: var(--spacing-xsmall);
-}
-
   .bd-c_stroke\.subtle {
     border-color: var(--colors-stroke-subtle);
 }
@@ -694,6 +678,10 @@
     align-items: flex-end;
 }
 
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
+}
+
   .as_center {
     align-self: center;
 }
@@ -734,10 +722,6 @@
     top: calc(var(--spacing-4xsmall) * -1);
 }
 
-  .fw_bold {
-    font-weight: var(--font-weights-bold);
-}
-
   .bg-c_surface\.disabled {
     background-color: var(--colors-surface-disabled);
 }
@@ -773,6 +757,10 @@
     transition-timing-function: ease-out;
 }
 
+  .top_xsmall {
+    top: var(--spacing-xsmall);
+}
+
   .right_xsmall {
     right: var(--spacing-xsmall);
 }
@@ -908,6 +896,10 @@
     overflow-wrap: anywhere;
 }
 
+  .\[\&_\>_\:is\(\:last-child\)\]\:pbe_5xlarge > :is(:last-child) {
+    padding-block-end: var(--spacing-5xlarge);
+}
+
   .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
     text-align: center;
 }
@@ -1456,6 +1448,9 @@
 }
 
   @media screen and (min-width: 29.75rem) {
+    .mobileWide\:h_340px {
+      height: 340px;
+}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1468,12 +1463,6 @@
 }
 
   @media screen and (min-width: 37.5625rem) {
-    .tablet\:pbs_medium {
-      padding-block-start: var(--spacing-medium);
-}
-    .tablet\:pbe_medium {
-      padding-block-end: var(--spacing-medium);
-}
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
 }
@@ -1488,9 +1477,6 @@
 }
     .tablet\:w_83\.333\% {
       width: 83.333%;
-}
-    .tablet\:top_medium {
-      top: var(--spacing-medium);
 }
     .tablet\:ai_unset {
       align-items: unset;
@@ -1557,6 +1543,27 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
+}
+    .tabletWide\:w_auto {
+      width: auto;
+}
+    .tabletWide\:d_block {
+      display: block;
+}
+    .tabletWide\:ov_hidden {
+      overflow: hidden;
+}
+    .tabletWide\:pos_relative {
+      position: relative;
+}
+    .tabletWide\:lc_4 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+}
+    .tabletWide\:box-orient_vertical {
+      box-orient: vertical;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
@@ -1567,23 +1574,11 @@
 }
 
   @media screen and (min-width: 61.3125rem) {
-    .desktop\:pbs_xxlarge {
-      padding-block-start: var(--spacing-xxlarge);
-}
-    .desktop\:pbe_xxlarge {
-      padding-block-end: var(--spacing-xxlarge);
-}
     .desktop\:w_260px {
       width: 260px;
 }
     .desktop\:h_260px {
       height: 260px;
-}
-    .desktop\:h_340px {
-      height: 340px;
-}
-    .desktop\:top_xxlarge {
-      top: var(--spacing-xxlarge);
 }
     .desktop\:grid-tc_repeat\(3\,_minmax\(0\,_1fr\)\) {
       grid-template-columns: repeat(3, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.15-alpha.0",
+  "version": "56.0.16-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,11 +34,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.10-alpha.0",
+    "@ndla/icons": "^8.0.11-alpha.0",
     "@ndla/licenses": "^8.0.1-alpha.0",
-    "@ndla/primitives": "^1.0.14-alpha.0",
-    "@ndla/safelink": "^7.0.14-alpha.0",
-    "@ndla/styled-system": "^0.0.12",
+    "@ndla/primitives": "^1.0.15-alpha.0",
+    "@ndla/safelink": "^7.0.15-alpha.0",
+    "@ndla/styled-system": "^0.0.13",
     "@ndla/util": "^4.1.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -53,7 +53,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.20",
+    "@ndla/preset-panda": "^0.0.21",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.1-alpha.0",
     "@pandacss/dev": "^0.44.0",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4708656585c922a4b2c2e30b095f88097c29436b"
+  "gitHead": "b37f00c4b3c340890aa9729d74439fa84e2d2eed"
 }

package/src/Article/Article.tsx

@@ -10,78 +10,16 @@ import { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
 import { ark, type HTMLArkProps } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
-import { JsxStyleProps, StyledVariantProps, SystemStyleObject } from "@ndla/styled-system/types";
+import { Stack, styled } from "@ndla/styled-system/jsx";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { ArticleByline } from "./ArticleByline";
 import { ContentTypeBadgeNew } from "..";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
 
-const articlePadding: SystemStyleObject = {
-  paddingInline: "8%",
-};
-
-const paddingBlockEnd: SystemStyleObject = {
-  paddingBlockEnd: "xsmall",
-  tablet: {
-    paddingBlockEnd: "medium",
-  },
-  desktop: {
-    paddingBlockEnd: "xxlarge",
-  },
-};
-
-const paddingBlockStart: SystemStyleObject = {
-  paddingBlockStart: "xsmall",
-  tablet: {
-    paddingBlockStart: "medium",
-  },
-  desktop: {
-    paddingBlockStart: "xxlarge",
-  },
-};
+const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
 
-export const ArticlePadding = styled(
-  ark.div,
-  {
-    base: {
-      ...articlePadding,
-      width: "100%",
-    },
-    variants: {
-      padStart: {
-        true: paddingBlockStart,
-      },
-      padEnd: {
-        true: paddingBlockEnd,
-      },
-    },
-  },
-  { baseComponent: true },
-);
-
-const StyledArticleContent = styled(
-  ark.section,
-  {
-    base: {
-      background: "surface.default",
-    },
-    variants: {
-      padded: {
-        true: {
-          ...articlePadding,
-          ...paddingBlockStart,
-          ...paddingBlockEnd,
-        },
-      },
-    },
-  },
-  { baseComponent: true },
-);
-
-type ArticleContentVariantProps = StyledVariantProps<typeof StyledArticleContent>;
-
-export const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<"div"> & JsxStyleProps & ArticleContentVariantProps>(
+export const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<"div"> & JsxStyleProps>(
   ({ className, ...props }, ref) => (
     <StyledArticleContent className={cx("ndla-article", className)} {...props} ref={ref} />
   ),
@@ -91,8 +29,10 @@ const StyledArticleWrapper = styled(
   ark.article,
   {
     base: {
+      background: "background.default",
       display: "flex",
       flexDirection: "column",
+      gap: "xxlarge",
       color: "text.default",
       alignItems: "center",
       width: "100%",
@@ -123,7 +63,6 @@ export const ArticleHGroup = styled(
       width: "100%",
       flexDirection: "column",
       alignItems: "flex-start",
-      gap: "xsmall",
       "& h1": {
         overflowWrap: "anywhere",
       },
@@ -132,42 +71,16 @@ export const ArticleHGroup = styled(
   { baseComponent: true },
 );
 
-export const ArticleActionWrapper = styled(
-  ark.div,
-  {
-    base: {
-      position: "absolute",
-      right: "8%",
-      top: "xsmall",
-      tablet: {
-        top: "medium",
-      },
-      desktop: {
-        top: "xxlarge",
-      },
-    },
-  },
-  { baseComponent: true },
-);
-
 export const ArticleHeader = styled(
   ark.header,
   {
     base: {
       display: "flex",
       flexDirection: "column",
-      background: "surface.default",
       gap: "medium",
       alignItems: "flex-start",
       width: "100%",
-    },
-    variants: {
-      padded: {
-        true: {
-          ...articlePadding,
-          ...paddingBlockStart,
-        },
-      },
+      paddingBlockStart: "xxlarge",
     },
   },
   { baseComponent: true },
@@ -179,22 +92,22 @@ export const ArticleFooter = styled(
     base: {
       display: "flex",
       flexDirection: "column",
-      background: "surface.default",
       gap: "xxlarge",
       width: "100%",
-    },
-    variants: {
-      padded: {
-        true: {
-          ...articlePadding,
-          ...paddingBlockEnd,
-        },
+      "& > :is(:last-child)": {
+        paddingBlockEnd: "5xlarge",
       },
     },
   },
   { baseComponent: true },
 );
 
+const StyledStack = styled(Stack, {
+  base: {
+    width: "100%",
+  },
+});
+
 interface ArticleTitleProps {
   heartButton?: ReactNode;
   contentType?: ContentType;
@@ -215,10 +128,12 @@ export const ArticleTitle = ({
   competenceGoals,
 }: ArticleTitleProps) => {
   return (
-    <ArticleHeader padded>
+    <ArticleHeader>
       <ArticleHGroup>
-        {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
-        {!!heartButton && <ArticleActionWrapper>{heartButton}</ArticleActionWrapper>}
+        <StyledStack justify="space-between" align="center" direction="row" gap="small">
+          {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+          {heartButton}
+        </StyledStack>
         <Heading textStyle="heading.large" id={id} lang={lang}>
           {title}
         </Heading>
@@ -270,8 +185,8 @@ export const Article = ({
         competenceGoals={competenceGoals}
         lang={lang}
       />
-      <ArticleContent padded>{content}</ArticleContent>
-      <ArticleFooter padded>
+      <ArticleContent>{content}</ArticleContent>
+      <ArticleFooter>
         <ArticleByline
           footnotes={footNotes}
           authors={authors}

package/src/Article/index.ts

@@ -12,10 +12,8 @@ export {
   ArticleHeader,
   ArticleFooter,
   ArticleTitle,
-  ArticleActionWrapper,
   ArticleHGroup,
   ArticleContent,
-  ArticlePadding,
 } from "./Article";
 
 export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";

package/src/CampaignBlock/CampaignBlock.tsx

@@ -36,7 +36,9 @@ interface Props {
 
 const Container = styled("div", {
   base: {
+    width: "100%",
     display: "flex",
+    gap: "medium",
     flexDirection: "column",
     border: "1px solid",
     borderColor: "stroke.default",
@@ -59,17 +61,33 @@ const LinkText = styled(Text, {
     _hover: {
       textDecoration: "none",
     },
+    paddingBlock: "xsmall",
+    fontWeight: "bold",
+  },
+});
+
+const LinkHeader = styled(Text, {
+  base: {
+    display: "flex",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
   },
 });
+
 const StyledImg = styled("img", {
   base: {
     alignSelf: "center",
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    desktop: {
+    mobileWide: {
       height: "340px",
     },
+    tabletWide: {
+      width: "auto",
+    },
   },
 });
 
@@ -79,13 +97,26 @@ const ContentWrapper = styled("div", {
     position: "relative",
     display: "flex",
     flexDirection: "column",
-    gap: "xsmall",
+    gap: "medium",
     alignItems: "flex-start",
+    justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium",
   },
 });
 
+const StyledText = styled(Text, {
+  base: {
+    tabletWide: {
+      display: "block",
+      overflow: "hidden",
+      position: "relative",
+      lineClamp: 4,
+      boxOrient: "vertical",
+    },
+  },
+});
+
 interface MaybeLinkTextProps {
   url?: string;
   path?: string;
@@ -114,7 +145,7 @@ const CampaignBlock = ({
   className,
 }: Props) => {
   const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
-  const HeaderComponent = url?.url ? LinkText : Text;
+  const HeaderComponent = url?.url ? LinkHeader : Text;
   return (
     <Container className={className} data-embed-type="campaign-block">
       {imageSide === "left" && imageComponent}
@@ -124,7 +155,7 @@ const CampaignBlock = ({
             <InternalHeading>{parse(title)}</InternalHeading>
           </HeaderComponent>
         </MaybeLinkText>
-        <Text textStyle="body.large">{parse(description)}</Text>
+        <StyledText textStyle="body.xlarge">{parse(description)}</StyledText>
         {!!url?.url && (
           <MaybeLinkText url={url.url} path={path}>
             <LinkText textStyle="body.medium">

package/src/index.ts

@@ -44,9 +44,7 @@ export {
   ArticleHeader,
   ArticleContent,
   ArticleHGroup,
-  ArticleActionWrapper,
   ArticleTitle,
-  ArticlePadding,
 } from "./Article";
 
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";

package/src/locale/messages-en.ts

@@ -1086,9 +1086,9 @@ const messages = {
         },
         fetchMore: "Fetch more answers",
         deleted: "This post has been deleted by the author.",
-        upvote: "Upvote",
+        upvote: "Like",
         numberOfUpvotes: "{{ count }} people have upvoted this.",
-        removeUpvote: "Remove upvote",
+        removeUpvote: "Stop liking",
         reply: "Write a reply to {{ name }}",
       },
       flag: {

package/src/locale/messages-nb.ts

@@ -1087,9 +1087,9 @@ const messages = {
         },
         fetchMore: "Hent flere svar",
         deleted: "Dette innlegget er slettet av forfatteren.",
-        upvote: "Stem opp",
+        upvote: "Liker",
         numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
-        removeUpvote: "Fjern stemme",
+        removeUpvote: "Slutt å like",
         reply: "Skriv et svar til {{ name }}",
       },
       flag: {