@ndla/ui 56.0.4-alpha.0 → 56.0.5-alpha.0

package/dist/panda.buildinfo.json

@@ -119,12 +119,11 @@
       "width]___[value:fit-content",
       "maxWidth]___[value:8xl",
       "flexWrap]___[value:wrap",
+      "gap]___[value:xxsmall",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",
       "flexDirection]___[value:column]___[cond:mobileDown",
-      "gap]___[value:xxsmall]___[cond:mobileDown",
       "color]___[value:inherit",
-      "gap]___[value:4xsmall",
       "alignItems]___[value:flex-end",
       "display]___[value:block]___[cond:tabletDown",
       "textDecoration]___[value:underline",
@@ -134,7 +133,6 @@
       "maxWidth]___[value:surface.xsmall",
       "maxWidth]___[value:surface.medium]___[cond:mobileWide",
       "maxWidth]___[value:1100px]___[cond:tabletWide",
-      "gap]___[value:xxsmall",
       "alignSelf]___[value:center",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:desktop",

package/dist/styles.css

@@ -326,12 +326,12 @@
     max-width: 8xl;
 }
 
-  .c_inherit {
-    color: inherit;
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
 }
 
-  .gap_4xsmall {
-    gap: var(--spacing-4xsmall);
+  .c_inherit {
+    color: inherit;
 }
 
   .td_underline {
@@ -342,10 +342,6 @@
     max-width: var(--sizes-surface-xsmall);
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -1723,9 +1719,6 @@
   @media screen and (max-width: 19.9975rem) {
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
-}
-    .mobileDown\:gap_xxsmall {
-      gap: var(--spacing-xxsmall);
 }
     .mobileDown\:ai_flex-start {
       align-items: flex-start;

package/es/Breadcrumb/Breadcrumb.js

@@ -16,12 +16,11 @@ const StyledList = styled("ol", {
     flexWrap: "wrap",
     alignItems: "center",
     listStyle: "none",
-    gap: "xsmall",
+    gap: "xxsmall",
     mobileDown: {
       alignItems: "flex-start",
       justifyContent: "center",
-      flexDirection: "column",
-      gap: "xxsmall"
+      flexDirection: "column"
     }
   }
 });

package/es/Breadcrumb/BreadcrumbItem.js

@@ -15,7 +15,7 @@ const StyledListItem = styled("li", {
   base: {
     display: "flex",
     color: "inherit",
-    gap: "4xsmall",
+    gap: "3xsmall",
     alignItems: "flex-end",
     tabletDown: {
       display: "block"

package/es/Breadcrumb/HomeBreadcrumb.js

@@ -6,7 +6,7 @@
  *
  */
 
-import { ArrowRightShortLine, HomeFill } from "@ndla/icons/common";
+import { ArrowRightShortLine, HomeLine } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import Breadcrumb from "./Breadcrumb";
@@ -49,7 +49,7 @@ const HomeBreadcrumb = _ref => {
       return /*#__PURE__*/_jsx(IconSafeLink, {
         "aria-label": item.name,
         to: item.to,
-        children: /*#__PURE__*/_jsx(HomeFill, {
+        children: /*#__PURE__*/_jsx(HomeLine, {
           title: item.name
         })
       });

package/es/styles.css

@@ -326,12 +326,12 @@
     max-width: 8xl;
 }
 
-  .c_inherit {
-    color: inherit;
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
 }
 
-  .gap_4xsmall {
-    gap: var(--spacing-4xsmall);
+  .c_inherit {
+    color: inherit;
 }
 
   .td_underline {
@@ -342,10 +342,6 @@
     max-width: var(--sizes-surface-xsmall);
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -1723,9 +1719,6 @@
   @media screen and (max-width: 19.9975rem) {
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
-}
-    .mobileDown\:gap_xxsmall {
-      gap: var(--spacing-xxsmall);
 }
     .mobileDown\:ai_flex-start {
       align-items: flex-start;

package/lib/Breadcrumb/Breadcrumb.js

@@ -23,12 +23,11 @@ const StyledList = (0, _jsx2.styled)("ol", {
     flexWrap: "wrap",
     alignItems: "center",
     listStyle: "none",
-    gap: "xsmall",
+    gap: "xxsmall",
     mobileDown: {
       alignItems: "flex-start",
       justifyContent: "center",
-      flexDirection: "column",
-      gap: "xxsmall"
+      flexDirection: "column"
     }
   }
 });

package/lib/Breadcrumb/BreadcrumbItem.js

@@ -21,7 +21,7 @@ const StyledListItem = (0, _jsx2.styled)("li", {
   base: {
     display: "flex",
     color: "inherit",
-    gap: "4xsmall",
+    gap: "3xsmall",
     alignItems: "flex-end",
     tabletDown: {
       display: "block"

package/lib/Breadcrumb/HomeBreadcrumb.js

@@ -56,7 +56,7 @@ const HomeBreadcrumb = _ref => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSafeLink, {
         "aria-label": item.name,
         to: item.to,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.HomeFill, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.HomeLine, {
           title: item.name
         })
       });

package/lib/styles.css

@@ -326,12 +326,12 @@
     max-width: 8xl;
 }
 
-  .c_inherit {
-    color: inherit;
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
 }
 
-  .gap_4xsmall {
-    gap: var(--spacing-4xsmall);
+  .c_inherit {
+    color: inherit;
 }
 
   .td_underline {
@@ -342,10 +342,6 @@
     max-width: var(--sizes-surface-xsmall);
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -1723,9 +1719,6 @@
   @media screen and (max-width: 19.9975rem) {
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
-}
-    .mobileDown\:gap_xxsmall {
-      gap: var(--spacing-xxsmall);
 }
     .mobileDown\:ai_flex-start {
       align-items: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.4-alpha.0",
+  "version": "56.0.5-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,13 +33,13 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^15.0.4-alpha.0",
+    "@ndla/button": "^15.0.5-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^8.0.4-alpha.0",
+    "@ndla/icons": "^8.0.5-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/primitives": "^1.0.4-alpha.0",
-    "@ndla/safelink": "^7.0.4-alpha.0",
+    "@ndla/primitives": "^1.0.5-alpha.0",
+    "@ndla/safelink": "^7.0.5-alpha.0",
     "@ndla/styled-system": "^0.0.10",
     "@ndla/typography": "^0.4.23",
     "@ndla/util": "^4.1.0",
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fdd094fea36baa5ee2bdfe5b2bc6c423d304f22"
+  "gitHead": "1d1e87ed1d2fccefbc0ece2130f42d7d71cbe1a9"
 }

package/src/Breadcrumb/Breadcrumb.tsx

@@ -25,12 +25,11 @@ const StyledList = styled("ol", {
     flexWrap: "wrap",
     alignItems: "center",
     listStyle: "none",
-    gap: "xsmall",
+    gap: "xxsmall",
     mobileDown: {
       alignItems: "flex-start",
       justifyContent: "center",
       flexDirection: "column",
-      gap: "xxsmall",
     },
   },
 });

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -29,7 +29,7 @@ const StyledListItem = styled("li", {
   base: {
     display: "flex",
     color: "inherit",
-    gap: "4xsmall",
+    gap: "3xsmall",
     alignItems: "flex-end",
     tabletDown: {
       display: "block",

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ArrowRightShortLine, HomeFill } from "@ndla/icons/common";
+import { ArrowRightShortLine, HomeLine } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import Breadcrumb from "./Breadcrumb";
@@ -51,7 +51,7 @@ const HomeBreadcrumb = ({ items }: Props) => {
     if (item.index === 0 && typeof item.name === "string") {
       return (
         <IconSafeLink aria-label={item.name} to={item.to}>
-          <HomeFill title={item.name} />
+          <HomeLine title={item.name} />
         </IconSafeLink>
       );
     }

package/src/Embed/ImageEmbed.stories.tsx

@@ -9,7 +9,6 @@
 import { ReactNode } from "react";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { Text } from "@ndla/primitives";
-import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { ImageEmbedData } from "@ndla/types-embed";
@@ -186,8 +185,7 @@ export const Cropped: StoryObj<typeof ImageEmbed> = {
 };
 
 const TextWrapper = ({ children }: { children: ReactNode }) => (
-  // TODO: Replace this with regular css once we drop emotion
-  <styled.div css={css.raw({ "& > p": { marginBlock: "medium", width: "100%" } })}>
+  <styled.div css={{ "& > p": { marginBlock: "medium", width: "100%" } }}>
     <Text>
       Du har en kjempegod idé til en kortfilm. Men det koster mange penger å produsere filmen. Derfor er du avhengig av
       at noen tenner på idéen din og bestemmer seg for å bruke ressurser på nettopp dette prosjektet.