@ndla/primitives 1.0.14-alpha.0 → 1.0.16-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.44.0",
+  "schemaVersion": "0.45.2",
   "styles": {
     "atomic": [
       "display]___[value:flex",
@@ -617,6 +617,21 @@
       "--arrow-size]___[value:spacing.xxsmall",
       "--arrow-background]___[value:colors.surface.action",
       "height]___[value:200px",
+      "transitionDuration]___[value:default",
+      "gridColumnGap]___[value:var(--gutter, 0)",
+      "gridTemplateColumns]___[value:1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr",
+      "gridColumnStart]___[value:2]___[cond:& > *",
+      "gridColumnEnd]___[value:2]___[cond:& > *",
+      "--size]___[value:sizes.surface.contentMax",
+      "--size]___[value:sizes.surface.articleMax",
+      "--size]___[value:sizes.surface.pageMax",
+      "--gutter]___[value:0px",
+      "--gutter]___[value:spacing.medium]___[cond:mobileWide",
+      "--gutter]___[value:spacing.medium]___[cond:tablet",
+      "--gutter]___[value:spacing.small",
+      "width]___[value:100%]___[cond:& ",
+      "gridColumnStart]___[value:1]___[cond:& ",
+      "gridColumnEnd]___[value:-1]___[cond:& ",
       "minHeight]___[value:3xlarge",
       "borderBlockWidth]___[value:1px",
       "borderInlineColor]___[value:transparent",

package/dist/styles.css

@@ -913,6 +913,26 @@
     height: 200px;
 }
 
+  .\--size_sizes\.surface\.contentMax {
+    --size: var(--sizes-surface-content-max);
+}
+
+  .\--size_sizes\.surface\.articleMax {
+    --size: var(--sizes-surface-article-max);
+}
+
+  .\--size_sizes\.surface\.pageMax {
+    --size: var(--sizes-surface-page-max);
+}
+
+  .\--gutter_0px {
+    --gutter: 0px;
+}
+
+  .\--gutter_spacing\.small {
+    --gutter: var(--spacing-small);
+}
+
   .min-h_3xlarge {
     min-height: var(--sizes-3xlarge);
 }
@@ -1309,6 +1329,19 @@
     right: var(--spacing-xxsmall);
 }
 
+  .trs-dur_default {
+    --transition-duration: default;
+    transition-duration: default;
+}
+
+  .grid-cg_var\(--gutter\,_0\) {
+    grid-column-gap: var(--gutter, 0);
+}
+
+  .grid-tc_1fr_min\(var\(--size\)\,_calc\(100\%_-_\(var\(--gutter\,_0\)_\*_2\)\)\)_1fr {
+    grid-template-columns: 1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr;
+}
+
   .trs-prop_background-color\,_border-color\,_color {
     --transition-prop: background-color, border-color, color;
     transition-property: background-color, border-color, color;
@@ -1742,6 +1775,10 @@
     display: inline-block;
 }
 
+  .\[\&\]\:w_100\% {
+    width: 100%;
+}
+
   .highlighted\:bg_var\(--background-hover\)[data-highlighted] {
     background: var(--background-hover);
 }
@@ -1910,6 +1947,22 @@
     outline-color: var(--colors-stroke-hover);
 }
 
+  .\[\&_\>_\*\]\:grid-cs_2 > * {
+    grid-column-start: 2;
+}
+
+  .\[\&_\>_\*\]\:grid-ce_2 > * {
+    grid-column-end: 2;
+}
+
+  .\[\&\]\:grid-cs_1 {
+    grid-column-start: 1;
+}
+
+  .\[\&\]\:grid-ce_-1 {
+    grid-column-end: -1;
+}
+
   .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-bs-c_transparent[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-bs-c_transparent[aria-current="page"] {
     border-block-start-color: transparent;
 }
@@ -2630,6 +2683,12 @@
     content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ';
 }
 
+  @media screen and (min-width: 29.75rem) {
+    .mobileWide\:--gutter_spacing\.medium {
+      --gutter: var(--spacing-medium);
+}
+}
+
   @media screen and (min-width: 37.5625rem) {
     .tablet\:bdr_small {
       border-radius: var(--radii-small);
@@ -2660,6 +2719,9 @@
 }
     .tablet\:pbs_xxlarge {
       padding-block-start: var(--spacing-xxlarge);
+}
+    .tablet\:--gutter_spacing\.medium {
+      --gutter: var(--spacing-medium);
 }
 }
 

package/es/Hero.js

@@ -14,8 +14,7 @@ const heroRecipe = sva({
   base: {
     root: {
       width: "100%",
-      position: "relative",
-      zIndex: "base"
+      position: "relative"
     },
     background: {
       height: "350px",

package/es/Layout/PageContent.js

@@ -0,0 +1,104 @@
+/**
+ * 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 { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { css, cva } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+// TODO: Rename this component
+
+const pageRecipe = cva({
+  base: {
+    display: "grid",
+    transitionProperty: "all",
+    transitionDuration: "default",
+    transitionTimingFunction: "default",
+    /**
+     * var(--size) is the max width of the content
+     * calc(100% - (var(--gutter, 0) * 2)) is the max width of the page, minus the gutters (inline padding without being actual padding).
+     * In effect, this will center the content on the page, and constrain it to either the content width or the page width, whichever is smaller.
+     */
+    gridColumnGap: "var(--gutter, 0)",
+    gridTemplateColumns: "1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr",
+    "& > *": {
+      gridColumnStart: "2",
+      gridColumnEnd: "2"
+    }
+  },
+  defaultVariants: {
+    variant: "page",
+    gutters: "always"
+  },
+  variants: {
+    variant: {
+      content: {
+        "--size": "sizes.surface.contentMax"
+      },
+      article: {
+        "--size": "sizes.surface.articleMax"
+      },
+      page: {
+        "--size": "sizes.surface.pageMax"
+      }
+    },
+    gutters: {
+      never: {
+        "--gutter": "0px"
+      },
+      mobileUp: {
+        "--gutter": "0px",
+        mobileWide: {
+          "--gutter": "spacing.medium"
+        }
+      },
+      tabletUp: {
+        "--gutter": "0px",
+        tablet: {
+          "--gutter": "spacing.medium"
+        }
+      },
+      always: {
+        "--gutter": "spacing.small",
+        tablet: {
+          "--gutter": "spacing.medium"
+        }
+      }
+    }
+  }
+});
+const StyledPageContent = styled(ark.div, {}, {
+  baseComponent: true
+});
+export const PageContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    variant,
+    gutters,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledPageContent, {
+    css: css.raw(pageRecipe.raw({
+      variant,
+      gutters
+    }), cssProp),
+    ref: ref,
+    ...props
+  });
+});
+export const BleedPageContent = styled(ark.div, {
+  base: {
+    "& ": {
+      width: "100%",
+      gridColumnStart: "1",
+      gridColumnEnd: "-1"
+    }
+  }
+}, {
+  baseComponent: true
+});

package/es/index.js

@@ -26,6 +26,7 @@ export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
 export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from "./ListItem/ListItem";
+export { PageContent, BleedPageContent } from "./Layout/PageContent";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, MenuItemText } from "./Menu";
 export { MessageBox } from "./MessageBox";
 export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";

package/lib/Combobox.d.ts

@@ -8,7 +8,7 @@
 import { Combobox } from "@ark-ui/react";
 import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"input" | "label" | "list" | "content" | "root" | "item" | "itemIndicator" | "control" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "positioner" | "trigger", {
+declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"input" | "label" | "content" | "list" | "root" | "item" | "itemIndicator" | "control" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "positioner" | "trigger", {
     variant: {
         simple: {
             item: {

package/lib/Dialog.d.ts

@@ -9,7 +9,7 @@ import { Dialog } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "description" | "content" | "positioner" | "trigger" | "backdrop" | "closeTrigger", {
+declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "content" | "description" | "positioner" | "trigger" | "backdrop" | "closeTrigger", {
     variant: {
         drawer: {
             content: {
@@ -96,7 +96,7 @@ export type DialogVariantProps = RecipeVariantProps<typeof dialogRecipe>;
 export type DialogRootProps = Dialog.RootProps & DialogVariantProps;
 export declare const InternalDialogRoot: (props: Dialog.RootProps & {
     variant?: "dialog" | "drawer" | undefined;
-    position?: "center" | "left" | "right" | "bottom" | "top" | undefined;
+    position?: "center" | "bottom" | "left" | "right" | "top" | undefined;
     size?: "small" | "xsmall" | "medium" | "large" | "full" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogRoot: ({ lazyMount, unmountOnExit, ...props }: DialogRootProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Hero.d.ts

@@ -8,7 +8,7 @@
 import { type HTMLArkProps } from "@ark-ui/react";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import { type JsxStyleProps } from "@ndla/styled-system/types";
-declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "root" | "background", {
+declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"background" | "content" | "root", {
     absolute: {
         true: {
             background: {

package/lib/Hero.js

@@ -20,8 +20,7 @@ const heroRecipe = (0, _css.sva)({
   base: {
     root: {
       width: "100%",
-      position: "relative",
-      zIndex: "base"
+      position: "relative"
     },
     background: {
       height: "350px",

package/lib/Layout/PageContent.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 { RecipeVariantProps } from "@ndla/styled-system/types";
+declare const pageRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    variant: {
+        content: {
+            "--size": "sizes.surface.contentMax";
+        };
+        article: {
+            "--size": "sizes.surface.articleMax";
+        };
+        page: {
+            "--size": "sizes.surface.pageMax";
+        };
+    };
+    gutters: {
+        never: {
+            "--gutter": "0px";
+        };
+        mobileUp: {
+            "--gutter": "0px";
+            mobileWide: {
+                "--gutter": "spacing.medium";
+            };
+        };
+        tabletUp: {
+            "--gutter": "0px";
+            tablet: {
+                "--gutter": "spacing.medium";
+            };
+        };
+        always: {
+            "--gutter": "spacing.small";
+            tablet: {
+                "--gutter": "spacing.medium";
+            };
+        };
+    };
+}>;
+export type PageContentVariantProps = RecipeVariantProps<typeof pageRecipe>;
+export declare const PageContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    variant?: "article" | "page" | "content" | undefined;
+    gutters?: "always" | "never" | "mobileUp" | "tabletUp" | undefined;
+} & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export {};

package/lib/Layout/PageContent.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageContent = exports.BleedPageContent = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+// TODO: Rename this component
+
+const pageRecipe = (0, _css.cva)({
+  base: {
+    display: "grid",
+    transitionProperty: "all",
+    transitionDuration: "default",
+    transitionTimingFunction: "default",
+    /**
+     * var(--size) is the max width of the content
+     * calc(100% - (var(--gutter, 0) * 2)) is the max width of the page, minus the gutters (inline padding without being actual padding).
+     * In effect, this will center the content on the page, and constrain it to either the content width or the page width, whichever is smaller.
+     */
+    gridColumnGap: "var(--gutter, 0)",
+    gridTemplateColumns: "1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr",
+    "& > *": {
+      gridColumnStart: "2",
+      gridColumnEnd: "2"
+    }
+  },
+  defaultVariants: {
+    variant: "page",
+    gutters: "always"
+  },
+  variants: {
+    variant: {
+      content: {
+        "--size": "sizes.surface.contentMax"
+      },
+      article: {
+        "--size": "sizes.surface.articleMax"
+      },
+      page: {
+        "--size": "sizes.surface.pageMax"
+      }
+    },
+    gutters: {
+      never: {
+        "--gutter": "0px"
+      },
+      mobileUp: {
+        "--gutter": "0px",
+        mobileWide: {
+          "--gutter": "spacing.medium"
+        }
+      },
+      tabletUp: {
+        "--gutter": "0px",
+        tablet: {
+          "--gutter": "spacing.medium"
+        }
+      },
+      always: {
+        "--gutter": "spacing.small",
+        tablet: {
+          "--gutter": "spacing.medium"
+        }
+      }
+    }
+  }
+});
+const StyledPageContent = (0, _jsx2.styled)(_react2.ark.div, {}, {
+  baseComponent: true
+});
+const PageContent = exports.PageContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant,
+    gutters,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPageContent, {
+    css: _css.css.raw(pageRecipe.raw({
+      variant,
+      gutters
+    }), cssProp),
+    ref: ref,
+    ...props
+  });
+});
+const BleedPageContent = exports.BleedPageContent = (0, _jsx2.styled)(_react2.ark.div, {
+  base: {
+    "& ": {
+      width: "100%",
+      gridColumnStart: "1",
+      gridColumnEnd: "-1"
+    }
+  }
+}, {
+  baseComponent: true
+});

package/lib/Tabs.d.ts

@@ -8,7 +8,7 @@
 import { Tabs } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps } from "@ndla/styled-system/types";
-declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"list" | "content" | "root" | "indicator" | "trigger", {
+declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "list" | "root" | "indicator" | "trigger", {
     variant: {
         line: {
             trigger: {

package/lib/index.d.ts

@@ -40,6 +40,8 @@ export type { LabelProps, LegendProps, FieldsetLegendProps } from "./Label";
 export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
 export type { ListItemVariantProps, ListItemProps } from "./ListItem/ListItem";
 export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from "./ListItem/ListItem";
+export type { PageContentVariantProps } from "./Layout/PageContent";
+export { PageContent, BleedPageContent } from "./Layout/PageContent";
 export type { MenuRootProps, MenuItemVariantProps, MenuItemProps } from "./Menu";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, MenuItemText, } from "./Menu";
 export type { MessageBoxVariantProps, MessageBoxProps } from "./MessageBox";

package/lib/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "Badge", {
     return _Badge.Badge;
   }
 });
+Object.defineProperty(exports, "BleedPageContent", {
+  enumerable: true,
+  get: function () {
+    return _PageContent.BleedPageContent;
+  }
+});
 Object.defineProperty(exports, "BlockQuote", {
   enumerable: true,
   get: function () {
@@ -531,6 +537,12 @@ Object.defineProperty(exports, "OrderedList", {
     return _ArticleLists.OrderedList;
   }
 });
+Object.defineProperty(exports, "PageContent", {
+  enumerable: true,
+  get: function () {
+    return _PageContent.PageContent;
+  }
+});
 Object.defineProperty(exports, "PaginationContext", {
   enumerable: true,
   get: function () {
@@ -1181,6 +1193,7 @@ var _Image = require("./Image");
 var _Input = require("./Input");
 var _Label = require("./Label");
 var _ListItem = require("./ListItem/ListItem");
+var _PageContent = require("./Layout/PageContent");
 var _Menu = require("./Menu");
 var _MessageBox = require("./MessageBox");
 var _NdlaLogo = require("./NdlaLogo");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.14-alpha.0",
+  "version": "1.0.16-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -29,12 +29,12 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^3.9.0",
-    "@ndla/styled-system": "^0.0.12",
+    "@ndla/styled-system": "^0.0.14",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.20",
-    "@pandacss/dev": "^0.44.0"
+    "@ndla/preset-panda": "^0.0.22",
+    "@pandacss/dev": "^0.45.2"
   },
   "peerDependencies": {
     "react": ">= 18",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4708656585c922a4b2c2e30b095f88097c29436b"
+  "gitHead": "a8a6f11eab7a7a254fff6fb062289dc413035d81"
 }